Javascript for changing background image depending on area user is in - javascript

My navigation has 5 buttons [Home, About, Services, Events, Contact] and each button has a background image of "blue-button.png". I want to switch it to "white-button.png" when the user is in that section. I wish it were as simple as a:active, but it's not and i'll explain why;
All of the content is displayed in an overlay. The way the website is built, you never leave the index page, but the content is loaded into the index page. This is why the a:active doesn't work.
Now for example, when the user opens the "About" page, the content (which I will call "About Main") appears, and has links to "About-Me", "About-You", and "FAQ". I want the "About" button to change background images (to white) whenever the user is in any of the areas that pertain to "About" (About Main, About me, About you, FAQ)... I also want the button to change back to blue when the user goes to a different section (EX: Contact) and then have the Contact button become white.
The only way I've noticed to tell where the user is, is that the overlay they are on has a css style of display:block while all the others are hidden with display:hidden...
So, I was thinking javascript similar to this:
if (About Main, About Me, About You, FAQ) is display:block
{ $(".about").css('background-image', 'url(../img/white-button.png)' }
else
{ $(".about").css('background-image', 'url(../img/blue-button.png)' }
if (contact) is display:block
{ $(".contact").css('background-image', 'url(../img/white-button.png)' }
else
{ $(".contact").css('background-image', 'url(../img/blue-button.png)' }
the navigation buttons have Classes like: <a class="about"><a class="contact">
while the overlays have IDs like: <div class="simple_overlay" id="about"><div class="simple_overlay" id="contact">
I know it's a lot of information but hopefully someone can help me clear up the specifics, I'm not very good with javascript...
Heres a link to the site if you want to look to get a better understanding
Thank you so much for your time in advance, This one is really killing me!

You're better off just adding and removing a .selected class from each of your links when you click on them. Then set the .selected class to have a background image of white-button.png. You would need to add click handlers to your navigation links so it would first remove any existing .selected classes from all of them, and then add .selected to the link you clicked on.
CSS
.navigation a.selected
{
background-image: url(../img/white-button.png);
}
Javascript - I see you're using jQuery so that makes this easy. Add the code below to your initialization section. I haven't tested this script but it should be pretty close.
// Add click event handler to all navigation links
$('.navigation a').click(function() {
// First remove selected class from all navigation links
$('.navigation a').removeClass('selected');
// Now add the selected class to the current link
$(this).addClass('selected');
});
EDIT: I tweaked this a little and added a jsfiddle for you to see it in action:
http://jsfiddle.net/VCaSV/

Related

If a parent menu item is clicked, automatically expand a specific submenu item

My e-commerce store requires three tier menu item to achieve the multi-column megamenu appearance that I want, and although its a bit weird I have found a workaround on desktop by simply hiding the "middle" menu item as "shown" here by the red box (as in there are menu items there, but they are display none).
This is honestly fine, as I hover over the parent menu item, and then only see the li menu items. However my issue is actually on mobile, where the expanding of the top menu item requires a click, and then I need to click a second time to expand the "middle" menu item as you can see in the screenshot below:
There is an event attached to both "caret" clicks, and that is:
function(e) {
e.target.closest("li").classList.toggle("dropdown-open"), e.preventDefault()
}
This attaches an event to the menu item as shown in this screenshot:
..and that allows the submenu to appear below "Weighing Categories" like this:
So my goal (on the mobile viewport) is to show all the submenu items (with the exception of the middle one, in this case "weighing categories") when the categories caret is clicked. I have tried a CSS approach (which is what the dropdown-open class is basically adding), but this results in it always showing (whereas I still want to keep the first click, just not the second click requirement).
body .main-navigation ul.menu li.menu-item-has-children > .sub-menu-wrapper { position: inherit; left: auto; opacity: 1; transform: translateX(0); }
I have also tried multiple variations of using JS to insert a class, and I think this is on the right track, but missing something lol.. I must admit that my JS is poor, mainly trying examples I have found during my research and adapting them.
jQuery("nav-menu-item-1247 .caret").click(function() {
jQuery("#nav-menu-item-6721").addClass( "dropdown-open");
});
The above (and note that it is not working) was supposed to add "dropdown-open" proactively to the weighing categories menu item ("6721") when the top menu item (the "1247" is the "categories" one) is clicked. Perhaps the prevent default in the default JS is blocking it, I am not sure and do not have the skill to troubleshoot it lol.
I would really appreciate some help, been fighting with this for almost 4 hours and I am probably doing something stupid lol. I can share the URL if needed, it is just locked behind a user/pass before it goes live, but I can temporarily remove it.
Thanks :)

Creating a preview effect for gallery images that closes when clicked outside

I am making a preview box that pops up when you click a gallery image and need to make it disappear when you click outside of it. I found many solutions but none work with my code. I think the problem is I may need a while loop but I tried several conditions and all were infinite.
This is the last solution I tried. The preview works but I can't get it to close when I click out.
DEMO
$('.portPic').click(function() {
if ($(this).attr('data-src2')) {
$('#clickedImg').attr('src', $(this).attr('data-src2'));
} else {
$('#clickedImg').attr('src', $(this).attr('src'));
}
$('#clickedImg').css('visibility', 'visible');
$('#clickedImg').blur(function() {
$('#clickedImg').css('visibility', 'hidden');
});
});
I've done a similar thing with a pop-out menu, where the user clicks "off" the menu and it closes. The same can be applied here.
I used an overlay div which spans the whole screen (with a translucent opacity - maybe 0.6 black or similar; or whatever colour you want) which gives a nice modal effect. Give it an id - let's say modal-overlay.
You can put it static in your page code, and set the display to none and make it the full-size of the page (through a CSS class).
<div id="modal-overlay" class="full-screen-overlay"></div>
Set the z-index of the overlay to higher than the rest of your page, and the z-index of your popup to higher than the overlay. Then when you show your popup, also set the visibility of the modal-overlay to visible, too.
In your script code, put an event handler for when the modal div is clicked:
$('#modal-overlay').click(function() {
$('#clickedImg').hide();
$('#modal-overlay').hide();
})
I would also use the .hide() jQuery method, which is easier than typing out the visibility.
Better still, if you have more than 1 thing going on (which you would with a modal overlay), wrap your "show/hide" of the popup in a hidePopup() or closePopup() method and call it onClick to save re-using code.
For effects when opening the popup/overlay, you can also use jQuery animations like .fadeIn() or .slideDown(). Use fadeOut and slideUp to hide.
These animations also perform the showing/hiding, so you wouldn't need to call .hide() or .show().
Check out this link to jQuery's API documentation for animations. Very useful and a good read.
Hope this helps!
You'll need to create a seperate div that is most likely fixed position that sits just one step lower (z-index) than your popped-up image. Attach a click handler to this div (overlay) and do your showing/hiding functions in there.
You can use modal photo gallery.
http://ashleydw.github.io/lightbox/
You can use this codepen code, too. SO is not letting me post the link here. So serach using thi "Bootstrap Gallery with Modal and Carousel".
Hope this helps..

After first click on delegate selector, it refreshes the page

I am having a serious problem using .delegate in jQuery 1.11
I have a sidebar called ".local-filters" which opens when I click #consult-filter.
After that, the hidden sidebar from the right appears (named .local-filter) (toggles a class called .active) and ".overlay" (100% height and width div) makes a black background with class ".active"
I used this to make that happen. Also, I want to click on .overlay (black background) and toggle the overlay class to make it visual disappear.
$(document).delegate('#consult-filter, .overlay, .cerrar filtros','click',function(){
$(".local-filters").toggleClass('active');
$("body").toggleClass('menu-active');
return false;
});
I read a lot of articles and read something about bubble spreading, but I don't know actually what is happening.
Everything is working correctly, but I don't know why in the second click I made to this element, it automatically refreshes the entire page.
Any ideas?

Trouble creating an expanding list with jQuery

I need to make a list for my client's podcast archive page that opens up to reveal links to the different podcasts for the month they click on. I pretty much want exactly something like BlogSpot has for their default blog archive widget on the right side of the page here: http://kimrome.blogspot.com/
I was able to make something like that here: http://thehummingbirdplace.com/test2.html but I'm not sure how to make the arrows that show if a list has been expanded or not. So it needs to change direction when it's clicked and return to the previous direction when it's clicked again to close that section.
My version also has the child elements showing when I open the page, and I don't want them to expand until their parent is clicked on.
I've look online to see if there is jQuery already created to do this, or how I might be able to make it, but since I'm not sure what this whole thing is properly titled, I get mixed results. Any help would be appreciated!!
Try jQuery-UI accordion
$(...).accordion();
, or this: http://jsfiddle.net/5SKLV/1/
$(...).myAccordion();
Just write CSS at your taste.
If you would like to do this yourself (it's fun to write things yourself):
I've added an ID of #tree to the root <ul>, and wrapped the text of the level 1 <li>s in <span>:
<ul id="tree">
<li>
<span>parent1</span>
<ul>
<li>child11</li>
<li>child12</li>
</ul>
</li>
<li>
<span>parent2</span>
<ul>
<li>child21</li>
<li>child22</li>
</ul>
</li>
</ul>
To apply arrows that point left and right to the parent elements, create two CSS classes with backgrounds, for example (you'll need to find the background images elsewhere or make your own):
.opened > span {
background: url('arrow_pointing_down.png') left top;
color: #0a0; /* just to make it easy to know which class it has */
}
.closed > span {
background: url('arrow_pointing_right.png') right top;
color: #00a; /* just to make it easy to know which class it has */
}
To hide all the child elements when the page loads...
$('#tree > li').addClass('closed');
// hide the level 2 ul's
$('#tree > li ul').hide();
Then in your click handler:
$("#tree > li > span").click(function (event) {
event.preventDefault();
// swap the opened and closed classes
$(this).parent().toggleClass('opened closed');
// toggle the level 2 ul instead of li
$(this).parent().find("ul").toggle();
});
Working demo here: http://jsfiddle.net/cTLGN/
ADDITIONAL:
This demo code doesn't make use of caching references to jQuery objects to make it easier to read. In reality instead of doing:
$(this).parent().toggleClass('opened closed');
$(this).parent().find("ul").toggle();
... one should do:
var parent = $(this).parent(); // search the DOM once for this' parent, and remember it
parent.toggleClass('opened closed');
parent.find("ul").toggle();
.. because every time you use jQuery's $() constructor it needs to search thru the entire DOM, which can be quite expensive if you do it repeatedly.

How do I code CSS to "change" when I load/pull content using ajax?

I have 4 links that are being displayed as an image. The a tag is displayed in CSS by a small image and the a:hover is represented by a larger image. I am using ajax to load the content that each of these links represent.
http://www.avant-gardesalon.net/site/quality-products_copy.php
How do change the CSS so that when the content (for the related link) is displayed, the image displayed is the larger image? Also, once the user clicks on another link, how do I change the previous link back to the smaller image?
That means, pure css a:hover setting is not the answer, coz when mouse move out or click other places, the link will back to its normal state.
You need to handle the click event on that a, for example (suppose all a have the class product, and put the wine name as the id of the div):
$("a.product").click(function(e)
{
e.preventDefault(); // So that the link is only handled by the following code without default action
$("a.product").removeClass("active"); // Remove all other "active" products, ie, back into smaller image size
var name = $(this).parent.attr("id");
$(this).addClass("active"); // set the selected item to be "active" or larger image size in your case
// ajax logics here...
});
and the html can be
<div id="wineName1"><a class="product">...</a></div>
<div id="wineName1"><a class="product">...</a></div>
<div id="wineName1"><a class="product">...</a></div>
so that in your css
#wineName1 {...}
#wineName1 active { // you can then target the larger image like this here }
One last bit, which is not really related to your question, is that semantically your wines could better use unordered-list (ul) to represent.

Categories