Posts by gentlemedia

Well... that depends. Has that element a class name? And do you have in your child theme directory a style.css file where you can override the parent theme styles?

Then only override the margin for that element in your child theme css.

Yeah, it's likely your layout will break if you reset it to 'auto', because like I said it will bring back the default margins that are set in the browsers.
Why do you want to remove it?

Override it with this in your child theme style.css

* { margin: auto }

This will bring back the browsers' default margin of your elements.

What you put inside the load() event will only get triggered once the DOM and all assets (such as images, videos, iframes or whatever else you have on yout page) is fully loaded. So that's the moment when you want to hide your loader or spinner.

http://api.jquery.com/load-event/

You have to show the preloader with CSS and hide it with $(window).load(), when everything has been loaded.

$(window).load(function(){
    $("#Preloader").fadeOut(1000);
});

This is how I approach any project:

1. Define the core functionality
2. Make that work without any bells & whistles (even if the UX sucks)
3. Enhance

hericles is right. Give the containing element in your CSS the same dimensions as the svg's viewBox size and sharing your code would be indeed handy.

If you write a.submenu ul li you say that ul is a descendant of a.submenu, but that's not the case in that markup.
That ul is an adjacent sibling of a.submenu, so if you want to select that ul, you'll use the adjacent sibling combinator (+), so like this a.submenu + ul li. If you look at the pen I shared with you in your other post, then you see that I also used this combinator to select that ul that holds your submenu items.

Also using long selector chains like nav ul li a.submenu ul li a will lead eventually in CSS specificity problems, 3 is really the max you should use and add classes to the HTML if you need to.

Here's some reading for you:
https://css-tricks.com/almanac/selectors/d/descendant/
https://css-tricks.com/almanac/selectors/a/adjacent-sibling/
https://css-tricks.com/strategies-keeping-css-specificity-low/

Great! I've noticed I closed in that example markup an ul tag not properly, but I've got the basics in a pen for you so you can see how and what.
http://codepen.io/gentlemedia/pen/WwMQJz

[role=navigation] ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

[role=navigation] > ul > li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 0 1rem;
}

[role=navigation] .submenu + ul {
  position: absolute;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s;
}

[role=navigation] .submenu:hover + ul,
[role=navigation] .submenu + ul:hover {
  visibility: visible;
  opacity: 1;
}

My bad... I've pasted the wrong link at EDIT2
https://jsfiddle.net/gentlemedia/c16vnhLb/4/

And indeed visibility doesn't take space.

Any suggestion on what I could start building to get links into such thing

Usually this is how we would mark up a menu with a 1 level submenu

<nav role="navigation">
    <ul>
        <li><a href="page1.html">page one</a></li>
        <li><a href="#" class="submenu">submenu</a>
            <ul>
                <li><a href="page2.html">page two</a></li>
                <li><a href="page3.html">page three</a></li>
            <ul>
        </li>
        <li><a href="page4.html">page four</a></li>
    </ul>
</nav>

And then you would hide the ul tag that holds the submenu items and show it when you hover the a tag with the class submenu.
So something like this, but of course you will need to do a lot more within the CSS to get the main menu items aligned and the submenu where you want it.

.submenu + ul {
    visibility: hidden;
    opacity: 0;
    /* actually you don't need to transition
      * the visibility property.
      * Only the opacity is enough */ 
    transition: opacity .5s;
 }

.submenu:hover + ul {
    visibility: visible;
    opacity: 1;
}

Yes, I know, that's why I animate opacity.

No, you transition 'all' which includes also the display: none that you change on hover to display: inline-block

Doesn't work: https://jsfiddle.net/fzbx09qL/4/

Again, because of the display property

I need it to appear from nothing, not slide from bottom of the website to it's original position.

I know, just don't transition the top property, but only the opacity.

Thus, don't hide that div with display: none, but just with opacity: 0 and visibilty: hidden.

So you get something like this:

nav div {
  position: absolute;
  top: 100%;
  width: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
}

nav a:hover div {
  visibility: visible;
  opacity: 1;
}

https://jsfiddle.net/gentlemedia/c16vnhLb/1/

EDIT:

Second, there is some code that I commented out in HTML box. When I add it, the entire "dropdown" breaks. This might be because of links, but in future I'd really need it. Is there a work-around?

If you want links inside that div then, you shoud use another element instead of the anchor tag for the hover.

EDIT2:

Third, it seems this box is a little bit off to the side, is there a way to place it in center relatively to it's parent? Obviously it's there by default, as it leans on left side of it's parent.

https://jsfiddle.net/gentlemedia/c16vnhLb/2/

You can't transition the display property, so instead you could use opacity: 0 in combination with visibilty: hidden or hide that div off-screen with top: -100% (for example) and on hover you set it to top: 0 (or a bit more so that it will appear underneath).

okay... I see now your #clicked anchor and the section with the id #clicked.

Looking at the source of your HTML, I don't see the sections with the ID you want to scroll to.
If you have for example this:

<a href="#featured"><i class="glyphicon glyphicon-list-alt"></i> Despre Mine</a>

Then you should have further down the HTML an element with that ID like so:

<section id="featured">
    <p>Featured content etc.</p>
</section>

What the heck?!?

I see what you mean now and that's because you set the hover on .flipContainer and this div fills the whole width of the page and therefore the effect only works if you leave that div with your cursor up or down.

Instead you should hover the image, so like this:

.flipImage {
  border: 2px blue dotted;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.flipImage:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

With this transform: rotateY you rotate over the y-axis thus vertical. To flip horizontal you'll need to rotate over the x-axis; transform: rotateX

@Avinash_7 - This thread is 8 years old and the OP hasn't been here since, so don't resurrect old threads from the death!

Why do you still use device-width media queries? Just forget them. You don't need them, unless you're developing something for specific devices and their screen resolutions.
Styles in device-width media queries don't get triggered by resizing the browser window/viewport either, so that's why you don't see anything happening. These styles only get triggered if the width of the screen resolution of a device is exactly 800px.

So only use (viewport) width media queries and if you want to create mobile first RWD sites then you use min-width an if you want/need to create desktop first RWD websites, you use max-width media queries. The latter was used in the begiining of RWD more often , because of old IE that didn't support media queries. Nowadays the mobile first route is considered the way to go.

Here's some good info that explains the difference between width and device-width media queries:
http://www.sitepoint.com/media-queries-width-vs-device-width/

And here's one when to chooe between min-width and max-width:
http://petegale.com/blog/css-media-queries-min-width-vs-max-width/

The OP is not looking to build a menu. Re-read the question!

Look into the CSS property position: fixed

@RudyM - don't you think it's an overkill to use bootstrap to solve the OP's problem?

By downloading and implementing Bootstrap you will not learn how to create responsive websites. It's a shortcut and you can create them, but without knowing the core concept of RWD (media queries, fluid grids and flexible media) you will allways be dependend on a framework like Bootstrap and its features, snippets and templates. If you want to create custom & lightweight responsive websites optimized for whatever screen or device it will be viewed on, you will have to get your hands dirty.

https://responsivedesign.is/

The Jquery UI bundle is pretty small, about 600kb as I downloaded only what I needed for that (I don't really need it for anything else).

600kb is pretty HUGE... and certainly for only that bounce effect :)

So basically, at 0%, 20%, 50%, 80%, 100% (of the animation) the arrow doesn't move, but at 40% you move it 30px downward and at 60% 15px downward. Is that the way it works?

Indeed! But it could've be done also with an easeOutBack easing effect created with a cubic-bezier timing-function over the duration of 0% to 100%. It would've made the effect even smoother.
https://developer.mozilla.org/en/docs/Web/CSS/timing-function

You will need to add the 'label' element to your inputs aswell.

<form>

    <div>

        <label for="name">Name</label>
        <input type="text" name="name" placeholder="Your Name" required>

    </div>

    <div>

        <label for="email">Email</label>
        <input type="email" name="email" placeholder="enter valid email address" required>

    </div>

</form>

And set your label and input to display: block in your CSS, so that they will stack ontop of each other.

A bit off-topic, but instead of loading this massive jquery-ui files for just a bounce effect, you could also use a few lines of CSS to get the effect.

.arrow { animation: bounce 2s infinite }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) }
    40% { transform: translateY(-30px) }
    60% { transform: translateY(-15px) }
}

http://codepen.io/gentlemedia/full/BKLbZZ/

Unless you're planning to use more from jquery-ui of course, but still :)

You're making it for yourself already complicated with a HTML structure like this for your navigation bar.

<div id="coffee"><img src="images/coffee.jpg" width="130" height="120"></div>


<!-- navigation -->
<div id="logo"><img src="images/logo.png" alt="logo" width="200"></div>

<div id="navigation"></div> 

<div id="navcontainerbar">
<ul>

<li><a href="index.php">HOME</a></li>
    <li>

    <ul id="nav">
        <li><a class="fly" href="#">PORTFOLIO</a>
            <ul class="dd">
                <li><a href="portfolio.php">Web Porfolio</a></li>
                <li><a href="marketing-portfolio.php">Marketing Portfolio</a></li>             
            </ul>
        </li>     
    </ul>

    </li>    
<li class="service"><a href="services.php">SERVICES</a></li>
<li><a href="blog.php">BLOG</a></li>
<li><a href="contact.php">CONTACT</a></li>

</ul>
</div>

Visually, thus on the screen, it looks like these div tags are nested in a wrapper div, but they're not. All you did was position them ontop of each other with CSS fixed positioning and odd margins. And still all this hard coded <br> tags used for spacing.

Davy, before you want to sell services such as web design/development to clients, you really need to take a huge amount of steps back and start with the basics and that is learning HTML & CSS the proper way.
So before this thread ends up again in a thread with 40+ posts, I strongly advice you to start at the begining. Learn to walk before you can run!

http://learn.shayhowe.com/html-css/

For starter, don't use fixed px widths on your #container (1024px) and your #navigation (1050px).
Block-level elements such as a div will fill by default (auto) the full width of the window or it's containing element if you don't set a width in your CSS.

By the way... you're still on bloody slow server. It took ages to load everything.

They are accustomed to change classes and ids . if they see there is an event in html they understand something is going on that item

It's best practice to separating out any JavaScript behavior code from your markup and presentation. It's called unobstrusive JavaScript. If you work with web designers then you could decouple your JavaScript classes from the CSS ones by using a prefix.

<button class="btn js-popup">click here</button>

Like this, web designers know that the btn class is for styling and (other) JavaScript developers know the js-popup class is for behavior.

It really depends imo. Also about the escort agency. I've build some in the past back in Holland, but they were legitimate high class escort agencies (with an official license) and no dodgy businesses. If you want to do it to fill your portfolio with work, then I also think you should not do it. If you need to get food on the table or want to use the project to grow your skills and to get better at what you do, then why not?

Instead to hard code an empty div tag at the bottom for the fade effect, you could also use a pseudo element (:before or :after) for your CSS gradient.

.scroll-div {
    position: relative;
    height: 500px;
    overflow: auto;
}

.scroll-div::after {
    content: " ";
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 80px;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%)
}

To get a scrollbar you give that section (probably a div tag) in your CSS a fixed height and the property, overflow: auto;
But to get a scrollbar that fade-in on mouseover for example, you will need to resort to a custom scrollbar such as http://manos.malihu.gr/jquery-custom-content-scroller/

Is there any reason why you want to do this with JS, because you can do it purely with a few lines of CSS. There are several ways, but here's one way you could do it. (And yes, you can't have more then one image in the src attribute)

HTML:

<figure>

  <img src="http://images.freeimages.com/images/previews/824/sunbathing-1-1376871.jpg" alt="" />

  <img src="http://images.freeimages.com/images/previews/9ba/sunbathing-3-1376859.jpg" alt="" />

</figure>

CSS:

figure {
  position: relative;
}

img {
  position: absolute;
  transition: opacity 1s;
}

figure > img + img { opacity: 0 }

figure:hover > img:first-child { opacity: 0 }
figure:hover > img + img { opacity: 1 }

Little demo:
http://codepen.io/gentlemedia/full/VaeerO/

With jQuery it should be this:

$('#value').val("1")

http://api.jquery.com/val/

You would use them mostly if you want to serve high resolution (background) photos to devices with displays that can make use of them.

@media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {

    /* retina 2x - thus serve images twice the size as the originals */

}

mq short for media query

I don't know what you've wished, but what you're doing wrong is that you define your media queries based on widths of certain devices and in particular the widths of some iDevices.

I'd recommend to be device-agnostic by using media queries based on the width of the browser window/viewport (ex. @media screen and (min-width: 50em)) instead of the widths of devices (ex. @media screen and (device-width: 768px).
With this approach it doesn't matter on which device your webapp gets viewed and if done right it will always looks good and optimized within every viewport width.

I have a shared hosting package at Namecheap and I can have up to 3 domains/websites on my server for 38 dollar per/year.
https://www.namecheap.com/hosting/shared.aspx

Just let your content decide when you need a media query. Resize your browser window and if a piece of content or element start to look akward, then you need a mq to make it look decent again. To me all this predefined mq's based on pixel widths of certain devices is less efficient. What about all those devices with widths that don't fall in between those standard 320px, 768px and 1024px, etc.?

I for example start of my projects with a stylesheet like this. This works for me, but doesn't have to work for someone else of course. What I don't need at the end I delete and if I need a mq in between, I add.

/* REGULAR (NON-RETINA DISPLAY) MEDIA QUERIES */
/**********************************************/

@media screen and (min-width: 25em) { /* = 400px */


} /* end 25em (400px) MQ */


@media screen and (min-width: 31.25em) { /* = 500px */


} /* end 31.25em (500px) MQ */


@media screen and (min-width: 37.5em) { /* = 600px */


} /* end 37.5em (600px) MQ */


@media screen and (min-width: 43.75em) { /* = 700px */


} /* end 43.75em (700px) MQ */


@media screen and (min-width: 50em) { /* = 800px */


} /* end 50em (800px) MQ */


@media screen and (min-width: 56.25em) { /* = 900px */


} /* end 56.25em (900px) MQ */


@media screen and (min-width: 62.5em) { /* = 1000px */


} /* end 62.5em (1000px) MQ */


@media screen and (min-width: 68.75em) …

What the heck? A third thread of yours with the same question?
https://www.daniweb.com/programming/web-development/threads/502697/how-to-fetch-images-stored-in-different-arrays-in-a-single-page-in-codeign

You've asked this already in a previous thread, so why the duplcate?
https://www.daniweb.com/programming/web-development/threads/502693/display-particular-images-in-codeigniter

And 'struggeling with this code' is too vague and doesn't address your issue at all.

I checked in Mobile Safari (iPhone 5s with iOS 9.2.1) and to me it looks how it should look.

OMG... can someone please kill this thread??? :)

Okay... and do we have to guess what the problem is?

when it snaps to a different position, it isn't quite snapping to the top due to what I believe is to do with the width of the menu. Instead of the bottom of the menu snapping to the top of the section, the top of the navigation is appearing with what seems to be a 20px gap.

Sotty, but this is all pretty vague and unclear to me! With 'top' do you mean top of the page or top of an HTML element? You want to snap the bottom of the menu to the top of a section??? Can you post a link to the page or at least also the HTML of the menu and such?

Other then that. With the CSS you have for that #headerwrapper it will not center (horizontally), but you must have noticed that, right?
Only margin: 0 auto; on fixed positioned elements is not enough. You will also need left: 0 and right: 0.

#headerwrapper {
    width:1500px;
    margin: 0 auto;  
    height:138px;
    position:fixed;
    left: 0;
    right: 0;
    background:#212c2e;
}

Why not making it easier for people to help and create a fiddle or pen from your code, so they can experience too what you experience, because I asume no one knows what you're talking about. With a live example they might do and can even fork it with a solution.

What do you have so far?

The array is only for your media queries.
How and where to implement the orientation change, I don't know either but if the width of the orientation change falls within another media query, it will load the image that you have defined for that media query, isn't it?

Ah... okay. :) You can fire an event on orientaton change as well.
https://developer.mozilla.org/en-US/docs/Web/Events/orientationchange

Okay... just to let you know... the default value of the height property is auto, so it's redundant to declare it in your css.

The only difference; if the orientation is different, the same image to which the img tag has an id=1 for example, continues to change the image based on the first item in the array. From my knowledge that would entail some kind of comparision operation ?

I'm still confused!