I am trying to create a button to show all content. I want a fadein on mouse enter, fadeout on mouseleave. when you click the button it disables the fade out, until clicked again and that re-enables it
Here is the Jsfiddle: https://jsfiddle.net/uv4bxdxs/16/
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>
One possible solution would be to add a class to displayed elements on the button click event. The class purpose is to disable the fade-in-out functionality. When the button is clicked again that class is removed to re-enable fade-in-out effect.
var flag = true;
$('button').click( function() {
if (flag) {
$('#div1h1').fadeIn().addClass('shown');
flag = false;
}
else {
$('#div1h1').fadeOut().removeClass('shown');
flag = true;
}
});
See DEMO
Please use this code:
$(function() {
var showAllFlag = false;
var btnShowAll = $('#show-all');
$('body').on('mouseenter', 'div.info-box', function() {
showTitle($(this))
}).on('mouseleave', 'div.info-box', function() {
hideTitle($(this))
});
function showTitle(target) {
target.find('h1').stop().fadeIn();
}
function hideTitle(target) {
if (!showAllFlag) {
target.find('h1').stop().fadeOut();
}
}
function showAllTitles() {
$('.info-box h1').show();
showAllFlag = true;
}
btnShowAll.on('click', showAllTitles);
});
Or follow by this link: enter link description here
Change your function to this:
$(function() {
$('#div1').hover(function() {
$('#div1h1').fadeIn();
});
});
$(function() {
$('#div2').hover(function() {
$('#div2h2').fadeIn();
});
});
$(function() {
$('#div3').hover(function() {
$('#div3h3').fadeIn();
});
});
Assuming that you just want the H1 to fade in and for them to stay visible on hover, just have the following code:
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>
The JSFiddle link you provided has an extra JavaScript section which is causing the H1 to fade out on hover.
Just don't trigger the fadein if its already visible?
$('#div1').not(":visible").hover(function() {
$('#div1h1').fadeIn();
},
edit - My bad i didn't see that comma :), gimme a second
Related
I am new to learning jQuery so I've been stumped with this for a while (and excuse me if my question is very obvious).
When the user loads the site, I want the screen to append square images continuously every 5 seconds, until they click "Click Me!" which stops it. The function runForever which appends the images works on it's own if I add '$' in front of '(function)', but inside my button click function, runForever doesn't run at all. I know it doesn't run because I added an alert statement for when the user loads the page, but the page never gives me this statement. It does, however, give me the alert for when I click 'Click Me!'.
$(document).ready(function() {
(function runForever() {
(".img-box").append("<div class='img-from-other-class'</div>");
setTimeout(runForever, 5000);
});
var clicked = false;
$("button").click(function() {
if (clicked == false) {
alert ("beginning repetition");
runForever();
}
else {
alert ("button clicked");
clicked = true;
return;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<h3>jQuery Practice</h3>
</div>
<div class="col-6">
<button class="float-right">
Click Me
</button>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="img-box">
<div class="img-from-other-class"></div>
</div>
</div>
</div>
</div>
</body>
style css in follow
.img-from-other-class{
width:50px;
height:50px;
background:red;
border-radius:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<button class="stop-btn">STOP</button>
<div class="image-box"></div>
<script>
$(function(){
function run(){
interval = setInterval(function(){
$('.image-box').append('<div class="img-from-other-class"></div>');
}, 5000);
}
run();
// click for stop append
$('.stop-btn').click(function(){
clearInterval(interval);
});
});
</script>
</body>
<html>
Trying to build a dashboard that lets me test animations while linking and unlinking boxes. Got everything working, but when I add the link function, I found that the link doesn't work after the parent element has been cloned. I want it to work so that when someone clicks the left box, the right two boxes show whatever animation is selected as long as the link is active. If the link is inactive, the unlinked box does not animate. Using animate.css for the animations.
Here's the html:
<div id="animations-container">
<center>
<button name="slideInLeft" class="animation-selector selected">Slide In Left</button>
<button name="slideInDown" class="animation-selector">Slide In Down</button>
<button name="zoomInUp" class="animation-selector">Zoom In Up</button>
<button name="zoomIn" class="animation-selector">Zoom In</button>
<button name="pulse" class="animation-selector">Pulse</button>
<button name="wobble" class="animation-selector">Wobble</button>
<button name="shake" class="animation-selector">Shake</button>
</center>
</div>
<div id="container">
<div id="graphs">
<div class="block"><div class="content-block" style="height:280px; background-image:url(current-open-issues-by-opco.png);"></div></div>
<div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:237px; background-image:url(days-remaining-to-remediate-open-issues.png);"></div><div class="link-icon"></div></div>
<div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:350px; background-image:url(root-cause-of-ltm-issues.png);"></div></div>
</div>
<div style="clear:both;"></div>
</div>
and here's my jquery:
<script>
$(function() {
$(".linked-button").on('click', function() {
$('.linked').remove().clone(true, true).appendTo('#graphs');
});
});
$(function() {
$(".animation-selector").on('click', function() {
var animation = $(this).attr("name")
// console.log("changeclass");
$(".linked").removeClass().addClass('linked block animated');
$(".linked").addClass(animation);
$("#animations-container :button").removeClass('selected');
$(this).toggleClass('selected')
});
});
$(function() {
$(".link-icon").on('click', function() {
$(this).toggleClass('faded');
$(this).parent().toggleClass('linked');
});
});
Also replicated it in jsfiddle: https://jsfiddle.net/3hjfj/
Update - working! Thanks - this was my first stackoverflow question - nice to get my cherry popped. Here's the new code:
$(function() {
$('body').on('click', '.linked-button', function() {
$('.linked').remove().clone(true, true).appendTo('#graphs');
});
$('body').on('hover', '.linked-button', function() {
$('.link-icon').toggleClass("link-hover");
});
$('body').on('click', '.animation-selector', function() {
var animation = $(this).attr("name")
// console.log("changeclass");
$(".linked").removeClass().addClass('linked block animated');
$(".linked").addClass(animation);
$("#animations-container :button").removeClass('selected');
$(this).toggleClass('selected')
});
$('body').on('click', '.link-icon', function() {
$(this).toggleClass('faded');
$(this).parent().toggleClass('linked');
$('.transparent-blue').fade();
});
$('body').on('mouseenter', '.link-icon', function() {
$('.transparent-blue').show();
});
$('body').on('mouseleave', '.link-icon', function() {
$('.transparent-blue').hide();
});
});
Apart from not needing multiple document ready functions, the event handlers are applied only to the objects with those classes that exist at the time they are run, so the cloned objects do not get them. Try this instead:
$("document").on("click", ".link-icon", function() {
$("document").on("click", ".animation-selector, function() {
and
$("document").on("click", ".linked-button", function() {
Use this for dynamically created elements:
$('body').on('click', '.animation-selector', function() {
// do something
});
$('body').on('click', '.link-icon', function() {
// do something
});
So I got :
var current = $('.article.active');
$('div').on("click", function() {
if(current.next('.article').hasClass('hide')){
$(current).addClass('hide');
$(current).next('.article').removeClass('hide');
};
});
And Html:
<body>
<div class="app">
<div id="article0" class="article active"></div>
<div id="article1" class="article hide"></div>
<div id="article2" class="article hide"></div>
</div>
So when I click on the div the code works, but only once. I want to be executed multiple times for every div.
JSFIDDLE: http://jsfiddle.net/9xrpuru9/
You need to find the active element in the click handler, also the active class also have to be changed
$('div.app').on("click", function () {
var current = $('.article.active');
$(current).addClass('hide').removeClass('active');
if (current.next('.article').length) {
$(current).next('.article').removeClass('hide').addClass('active');
} else {
$('.article:first').removeClass('hide').addClass('active');
}
});
Demo: Fiddle
You are not setting the active class to the next article div.
You can try the following code.
$('.article').on("click", function () {
if ($(this).next('.article').hasClass('hide')) {
$(this).addClass('hide').removeClass('active');
$(this).next('.article').removeClass('hide').addClass('active');
};
});
I have the code below that clicking on an image hides a div.
Works perfectly, but does not work in IE ...
Why?
http://jsfiddle.net/mtsys/6qAfp/
codes:
$(document).ready(function () {
$('.fechar').click( function() { alert('testes'); $(".nav").attr("hidden",true); });
$('.mais').click( function() {
var status = $(".nav").attr("hidden");
if (status)
{
$(".nav").attr("hidden",false);
}
else
{
$(".nav").attr("hidden",true);
}
});
});
HTML:
<div class="header">
Estágio
<div class="mais"></div>
</div>
<div class ="parent">
<div class="content">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
<div class="nav"><div class="fechar"></div><div id="dadosDiv"></div></div>
</div>
tks
Use .hide() and toggle() to change the display of the elements
$('.fechar').click(function () {
$(".nav").hide()
});
$('.mais').click(function () {
$(".nav").toggle()
});
Demo: Fiddle
Why not change your JS to:
$('.fechar').click( function() { alert('testes'); $(".nav").hide(); });
$('.mais').click( function() {
$(".nav").toggle();
});
This will not only simplify your code but utilise jQuery's inbuilt function for toggling content visibility. Incidentally, the issue was the hidden attr reference, this should have been .css('hidden',true) if you want to go down that route...
The following function toggles a div when clicked on the relative id. Any way to set it up so that when the page loads, the div being toggled starts out closed?
I dont want them to be seen until clicked on.
Best,
Joey
<script type="text/javascript">
$(document).ready(function() {
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
Just hide them on dom ready, like this:
<script type="text/javascript">
$(document).ready(function() {
$(".exclusive-architects, .exclusive-international,
.exclusive-designers, .exclusive-historical").hide();
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>
You should just need to add a display:none to your starting CSS
DEMO
if your HTML looks like this:
<div id="buttons">
<div>toggle architects</div>
<div>toggle international</div>
<div>toggle designers</div>
<div>toggle historical</div>
</div>
<div class="cont"> architects content </div>
<div class="cont"> international content </div>
<div class="cont"> designers content </div>
<div class="cont"> historical content </div>
Than all you need is:
$('.cont').hide(); // HIDE ALL INITIALLY
$('#buttons div').click(function(){
$('.cont').eq( $(this).index() ).toggle();
});
$(function(){ // DOM ready
$(".exclusive-architects").hide();
$(".exclusive-international").hide();
$(".exclusive-designers").hide();
$(".exclusive-historical").hide();
});
it should work :)