so I'm building a wordpress website and I have some products sub-menus in a megamenu. I wanna make so when a hover a sub-menu product link to show a specific image in column 4 of the megamenu. I've tryed many options with css but can't figure it out.
So, as an exemple I've gave one link a special class ".pricomigdale" and the image ".pricomigdale-img" with a "display:none" so when I hover on "Pricomigdale de cocos" to take action like this ".pricomigdale a:hover .pricomigdale-img {display:block}" but nothing happen. Here's the website maybe someone can figure it out: https://thefitbaker.ro
enter image description here
I would like to eat your products ;)
I think it might be helpful if you would post a bit more of your code.
I just recognized that you left out a semicolon here: {display:block}
It should be {display:block;}
But I am not sure if that would solve your problem..
I think this fiddle can help you
The point is that you create attribute with your links, for example data-image with url of necessary image
And use JS to make your image changing on hover
$('a').hover(function(e) {
e.preventDefault();
$('#photo-container').html('<img src="' + $(this).data('image') + '"/>')
});
Related
I'm trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks
Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)
Im looking for a way to change the background image of a div using jQuery BUT only amending it, not totally changing it.
Let me explain.
Im using http://jqueryui.com/demos/sortable/#portlets to show some div's that open and close. Now when you click the portlet header it opens and closes the content below.
Inside the portlet header i have a child div which shows an arrow (either up or down) depending on the current state of the content. I need a way of changing the background image on this child div by adding on "-visible" onto the end of the url for the background image.
I wouldnt even know where to start with doing this, but i have added some code below for you to look at.
http://jsfiddle.net/45jZU/
From the fiddle there, i need to alter the background image of the portlet-arrow div inside portlet header. I can not simply change the background image all together, but i have simplified it down to post on here.
I hope this isnt too narrow to not be of use to anyone else on stackoverflow.
Thanks
Maybe I'm missing something here, but can't you use the .css attribute modifier for the selected jQuery object? Something like:
var current_background = $("#my-div").css("background-image");
$("#my-div").css("background-image", current_background + "-visible");
If you're looking to modify the class names themselves, you can try mess around with the .toggleClass(), .hasClass(), .addClass() and .removeClass() methods in jQuery.
I hope this helps, but let me know if I've missed the mark here completely!
I would personnaly go for using css classes to change the background image. If you decide to change the image afterwards, you won't have to alter your javascript. It is a better solution to use javascript to code the behavior of the widget, not the visual aspect.
So you have the following css:
.portlet-header {
background-image: url(<an image>);
}
.portlet-header.collapsed {
background-image: url(<an other one>);
}
Add this line to your javascript to toggle the collapsed class:
$(".portlet-header").click(function() {
...
$(this).parent().toggleClass('collapsed');
});
If you widgets starts collapsed, initially add the class.
DEMO
So, this one has me a little perplexed. I'm probably just looking at it from the wrong angle, I'm not sure. Anyhow, here goes:
I have a navigation section on a site, and I want each button (links to define contents of an iframe below) to have one background image when 'normal', one when the cursor is hovered over, and one while its corresponding content is displayed in the iframe. I'm guessing that last one might require some Javascript, but I really don't know (all this is still relatively new to me). I'm hoping at least some of it can be done in the usual a:link, a:hover, etc. way.
Any guidance would be greatly appreciated.
Add a class to it when it's clicked and has the iframe's content changed like this (javascript):
function changeIFrame(link) {
document.getElementsByTagName('iframe')[0].src = link.href;
link.className = 'activeFrame';
}
html:
link text
css:
.activeFrame { background-color: blue; }
Create a new CSS class called "current" and apply that class to link that has its corresponding content shown. All others don't get "current" applied to it.
Please take a look at this site as a reference: http://www.philsalesses.com/place-pulse/
On the left you'll see a screenshot of an image. If you click the image, it will open colorbox for that one image.
I'm using wordpress, so associated with that post there are 4 more screenshots, all in a gallery.
What I want to do is when you click on that one image, to cycle through all the images in the gallery associated with that post.
I'm brand spanking new to wordpress, so please speak down to me.
No need to speak down to - everyone starts somewhere. As for showing your other images, the way the colorbox plugin is setup on your page is like so (pseudocode):
for all links that contain an image {
if the link is to an image {
if the image has a CSS class of "colorbox-[0-9]+" {
group it with all other images with the same CSS class
}
if the image has a CSS class of "colorbox-manual" or no CSS class {
don't group it with any other images
}
}
}
Looking at your page I see two problems:
Your one image link has the CSS class "colorbox-manual".
There's only one link on your page that meets the above criteria :)
The easiest way to fix it would be to add the other 4 images to your post so they show up as thumbnails, however I suspect this isn't what you want. As a hack, what you could do is add the other 4 images and then give them all a display: none style. That way the colorbox plugin would find them and group them with you main image, but not actually show the thumbnails on the post.
Something like this for the four images:
<img src="image1-thumb.jpg" />
<img src="image2-thumb.jpg" />
<img src="image3-thumb.jpg" />
<img src="image4-thumb.jpg" />
If that doesn't work, check in your markup for the class that the colorbox plugin adds to your images. It should be in the form colorbox-[0-9]+ (i.e. colorbox-123).
I used NextGen Gallery, imported the pictures using that, set the "Effect" in the options to off. Then I went in to the nextgen source and added colorbox-1 as a class under each img. Style the CSS and I'm done. 4 hours tops.
Take a look at http://www.philsalesses.com/seaswarm for a demo.
On the first click, it works as expected:
the class is changed
and the html content is changed from 'Show...' to 'Close...'
the content area is expanded with the slideDown effect,
Good so far.
On the second click, ...
the class changes
the html content is changed from 'Close...' to 'Show...'
The content area does NOT go away as expected.
On the third click, ...
the class is changed
the html content is changed
the already-shown content is re-shown with the slidedown effect.
So everything is working except for the 2nd click when the content is supposed to be hidden again.
Here's the jQuery:
-
$('.open_user_urls').live('click', function() {
$('#user_urls').slideDown('slow');
$(this).addClass('close_user_urls');
$(this).removeClass('open_user_urls');
$(this).html('Close Search History');
return false;
});
$('.close_user_urls').live('click', function() {
$('#user_urls').slideUp('slow');
$(this).addClass('open_user_urls');
$(this).removeClass('close_user_urls');
$(this).html('Show Search History');
return false;
});
Here's the HTML it's acting on:
<h3 class='open_user_urls'>Show Search History</h3>
<div id='user_urls'>
// an OL tag with content
</div>
And the only applicable CSS:
#user_urls { display: none; }
EDIT - I replaced my jquery code with functionally equivalent code supplied in an answer below, but the problem persists. So the cause must be elsewhere. I do recall this code working originally, but then it stopped. I'm stumped. Time to strip everything else out piece by piece...
EDIT 2 - Since the bug must be elsewhere, I'm accepting a code improvement for my jquery as the answer. Thanks.
Edit 3 - Found the source of the problem.
Inside the #user_urls div I have an series of OLs with the following css:
.url_list {float: left; width: 285px; list-style-position: outside; margin-left: 25px;}
Each OL contains a list of 20 urls and is meant to display in as many multiple columns as required to display all the URLs.
Removing the float: left; on these OL tags causes the problem to go away.
So having a float on the content contained in the DIV thats showing and hiding is causing it not not hide at all. Why would this happen?
EDIT 4: Adding a inside the #user_urls DIV allows the hiding action to work properly.
Perhaps something like this would be simpler?
$(".open_user_urls").toggle(
function () {
$(this).text("Close Search History").siblings(".user_urls").slideDown("slow");
},
function () {
$(this).text("Show Search History").siblings(".user_urls").slideUp("slow");
}
);
The toggle function is designed for precisely the scenario you're encountering.
To reiterate the problem and resolution to this question...
Inside the #user_urls DIV were a series of OL tags, each floated left. It was the float that was causing the problem.
Adding a <br style='clear: left;' /> inside the #user_urls DIV fixed the problem.
From what I've found, jQuery needs to have the height style set in order to slide it correctly. A work around I've used is to set the height before you slide it closed.
$('#user_urls').css('height', $('#user_urls').height() + 'px');
After you set it once, it should work correctly from then on. Check out this tutorial for a more detailed explanation.
Since this question was opened, jQuery have put in a fix for this themselves.
Updating to the latest version of jQuery solved the problem for us with no CSS changes. (jQuery 1.4.4 as of Dec 9th 2010)
Found via discussion on Google Groups in turn found from d12's answer. According to duscussion, in some jQuery 1.3x versions this bug affected several actions, slideUp, fadeOut, and toggle, if the element being hidden/slid up is a a non-floated parent containing floated children.
I think Conor's answer might put you on the right track. I might also suggest slideToggle and toggleClass:
http://docs.jquery.com/Attributes/toggleClass
http://docs.jquery.com/Effects/slideToggle
I could be as easy as:
$("h3.open_user_urls").click(function () {
next("div#user_urls").slideToggle();
});
I can't duplicate your bug. I used your exact code and I cannot replicate your issue.
This must be a script error from a different place in your JS code.
Thanks for this question. It really got me on my way figuring out the problem toggling an element with floated children.
Another resource that really helped and explains the behavior a bit can be found
on this Google group discussion.
Putting a non breaking space in your div is another solution similar to what The Reddest suggested that worked for me on a similar issue.