Toggle CSS style on click - javascript

Scratching my head over this for a while now I will lose hair soon.
I have a site here:
http://ve.jago-staging.com/ I am trying to figure out how I can alter the code below so that when I click on featured posts the transition occurs same way, instead of just the round click links.
I've seen examples where I click on the element itself and it change style but not externally controlled.
round click still need to work
Thanks for the help
(function($) {
$(document).ready( function() {
$('.feature-slider a').click(function(e) {
$('.featured-posts section.featured-post').css({
opacity: 0,
visibility: 'hidden'
});
$(this.hash).css({
opacity: 1,
visibility: 'visible'
});
$('.feature-slider a').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
});
})(jQuery);

Do this:
$(document).ready( function() {
$('.feature-slider a').click(function(e) {
$('.featured-posts section.featured-post').toggleClass('your-extra-css');
});
});
And add the css stuff in your css:
.your-extra-css {
visibility:visible;
}

Related

CSS: Failing to display unless refreshed - Navigation bar

I have been working on navigation bar and the strangest issue is occurring.
Please use the JSFiddle link to see what I mean.
To duplicate the error:
Run the code when the desktop view is active i.e. when the navigation links are in a line.
Then resize the screen till the "click me" is displayed.
Then press it.
Now run the code while you see the "click me" and press it again.
JS information
jQuery(document).ready(function($) {
// UserCP
$('.rotate').on('click', function() {
$(this).toggleClass("down");
});
$('.nav-start').on('click', function() {
$("#nav2").removeClass("hidden");
$('#nav2 li a').stop().slideToggle('100');
return false;
});
$(document).ready(function() {
$('#nav2 li a').stop().slideToggle('100');
});
$('body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length) {
if ($('#nav2 li a').is(":visible")) {
$('html, body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
};
};
});
});
FIXED - UPDATED JSFiddle! Thanks #Louys Patrice Bessette #Titus #Rick
You are using two click events on this "Click me" li...
(One on .navstart and one on .rotate)
It may not be an issue, but this make the code harder to read.
Then, when you slideToggle(), if you want the submenu to slide down, it has to be hidden.
Because, since you remove the hidden class (probably usefull on load), the submenu is visible.
A Toggle hides it.
I simplified your script to this.
Have a look at this updated Fiddle.
$(document).ready(function() {
// Show submenu on "Click me"
$('.nav-start').on('click', function() {
$('.rotate').toggleClass("down");
$("#nav2").removeClass("hidden");
var subNav = $('#nav2 li a');
if(subNav.css("display")=="block"){
subNav.stop().slideUp('100');
}else{
subNav.stop().slideDown('100');
}
return false;
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
// Hide submenu on document click
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length && $('#nav2 li a').is(":visible")) {
$('#nav2 li a').stop().slideUp('100');
};
});
});

jQuery - Hide a particular div until another is clicked and hide that div again when div is hovered off

Here is what I am trying to do. I have a button (#facebook-button) that when clicked will show the contents of a div (#facebook). Now I want it so when the mouse is not on top (hover) of the div #facebook that it then hides the div #facebook.
Here is what I have so far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
Any suggestions?
You can use jQuery's on mouseleave event, that event is fired when the mouse leaves the area.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide().on('mouseleave', function() {
jQuery('#facebook').hide();
});
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
You can try some thing like this.
CSS
div { display: none; }
HTML
<a id="hover" href="#">Show</a>
<div id="div">Contents</div>
JS
$('#hover')
.mouseleave(function() {
$('#div').hide();
})
.click(function(e) {
e.preventDefault();
$('#div').show();
});
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
$('#facebook').on('mouseenter', function() {
// do something or remove that part to just leave mouseleave
}).on('mouseleave', function(){
$('#facebook').hide();
});
});
});
</script>
Basically after showing the div, we will just spot when his mouse is leaving the #facebook div to hide it.
You could also optimize the code and put $('#facebook') in a variable considering the amount of time you re use it. Saves you calling jquery more times than actually needed.
Try this Demo.
$('.fbContent').hide();
$('button').hover(
function() {
$('.fbContent').show();
},
function() {
$('.fbContent').hide();
}
)

Why is removeclass not working when div is collapsed?

here is my fiddle
why when a div is clicked from another div does the arrow not appear back when the other div has collapsed? i have it set up so when the div does not have the class 'clicked' it then removes the class 'arrowhide' but it when you do the above it doesn't seem to remove the 'arrowhide' even though the div no longer has the class 'clicked' here is my code...
$(function timelinetiles() {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if ($('.selected').children().hasClass("clicked")) {
$('.details').addClass('show');
}
if ($('.timelineTile').hasClass("clicked")) {
$(this).children('.arrow').addClass('arrowhide');
} else {
$('.arrow').removeClass('arrowhide');
}
if ($('.selected').children().hasClass("clicked")) {
$(this).children('.header').height(430);
} else {
$('.header').height(80);
}
});
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
$('.arrow').removeClass('arrowhide');
});
Your line 4 also needs to remove the arrowhide class, like this:
$('.selected').children().not(this).removeClass('clicked')
.children('.arrow').removeClass('arrowhide');
Updated fiddle: http://jsfiddle.net/mcx0t0fh/2/
Alternatively, you could do away with the arrowhide business, and change your .arrow.arrowhide CSS rule to .clicked .arrow
Alternative fiddle: http://jsfiddle.net/mcx0t0fh/4/

JQuery reversing SlideToggle in Wordpress

I have the following simple code:
jQuery( document ).ready(function( $ ) {
$('.menu ul li:has("ul")').hover(function() {
$('>ul', this).stop().slideToggle();
});
});
I'm using the 'no conflict' way of firing jQuery but for some reason my slide toggle is closing on hover rather than opening! What am I doing wrong? I'm sure its simple but I just can't see it.
An example can be seen here http://ng1club.everythingcreative.co.uk
Use mouseenter and mouseleave instead. Sometimes hover without the second function as a hover out, triggers twice.
$('.menu ul li:has("ul")').mouseenter(function() {
$('>ul', this).stop().slideDown();
}).mouseleave(function() {
$('>ul', this).stop().slideUp();
});
Try this according to documentation you can use hover and apply effect on hover and hover out
jQuery('.menu ul li:has("ul")').hover(
function() {
jQuery('>ul', this).stop().slideDown();
}, function() {
jQuery('>ul', this).stop().slideUp();
}
);
.hover()
Sample Fiddle

Displaying div elements onClick

I have two divs : #mosaic-content & #mosaic-content-1.
Initially, when the loads, #mosaic-content will be displayed with a class .active and #mosaic-content-1 will be hidden.
I have 4 links:
Home
Event
Gallery
About
The div #mosaic-content-1 should be displayed only when the user clicks on About. For all the other 3 clicks, it has to remain hidden.
I wrote the following code to achieve this:
$(function () {
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
});
$("#home, #event, #gallery").click(function () {
$("#mosaic-content").show();
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
$("#mosaic-content-1").removeClass("active");
});
$("#about").click(function () {
$("#mosaic-content").hide();
$("#mosaic-content").removeClass("active");
$("#mosaic-content-1").show();
$("#mosaic-content-1").addClass("active");
});
However, in the above code, if #mosaic-content is shown and then the user clicks Event or Gallery, the functions are run again, which makes my website a bit slow( The divs are full with a lot of HTML content).
Is there any better way of achieving this?
use .is(':visible') to check if the div is already visible
$(function () {
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
});
$("#home, #event, #gallery").click(function () {
if(!$("#mosaic-content").is(':visible')){
$("#mosaic-content").show();
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
$("#mosaic-content-1").removeClass("active");
}
});
$("#about").click(function () {
if($("#mosaic-content").is(':visible')){
$("#mosaic-content").hide();
$("#mosaic-content").removeClass("active");
$("#mosaic-content-1").show();
$("#mosaic-content-1").addClass("active");
}
});
Use classes, not id's.
Hide as default block .mosaic-content-1:
$(".mosaic-content-1").hide();
After show block .mosaic-content
$(".mosaic-content").show();
Onlick functions in block navigation:
$(".navigation a").click(function() {
if(!$(this).hasClass("about");) {
$(".navigation a").removeClass("active");
$(this).addClass("active");
$(".mosaic-content-1").hide();
$(".mosaic-content").show();
} else {
$(".navigation a").removeClass("active");
$(this).addClass("active");
$(".mosaic-content").hide();
$(".mosaic-content-1").show();
}
});

Categories

Resources