Dears am trying to change div background-image using jquery on click as shown in code below its working on all browsers except IE.....help please
<div id="section1" class="section111">
<div class="container">
<div style="width: 100%; z-index: 999999999;" class="ServicesTitle">
<p class="Main_TitaleServices">SERVICES & SOLUTIONS</p>
<p class="slogan">Full Solutions for a Perfect Business </p>
</div>
<div id="title-underline" style="margin-bottom: -30px;">
<img src="../../App_Themes/ThemeEn/Images/title-underline.png">
</div>
<div class="firstrow">
<div class="col-lg-3 divServices ">
</div>
</div>
</div>
</div>
here is the script
<script>
$(function () {
$("#WebsiteDevelopment").click(function () {
$("#section1").css("background-image", "url(/App_Themes/ThemeEn/Images/webdevelopment.jpg !important")
/
});
$("#btnWebsiteDevelopment").click(function () {
$("#section1").css("background-image", "url(/App_Themes/ThemeEn/Images/section1bg.png")
});
});
</script>
Try setting background instead of background-image.
<script>
$(function () {
$("#WebsiteDevelopment").click(function () {
$("#section1").css("background", "url(/App_Themes/ThemeEn/Images/webdevelopment.jpg !important")
/
});
$("#btnWebsiteDevelopment").click(function () {
$("#section1").css("background", "url(/App_Themes/ThemeEn/Images/section1bg.png")
});
});
</script>
Or use pure javascript approach,
document.getElementById('section1').backgroundImage = "url('url(/App_Themes/ThemeEn/Images/webdevelopment.jpg !important')";
Related
I'm using the .each() jQuery function together with the $(this) selector to effect a hovered div, but because the given divs are close to one another, the $(this) selector selects more than one element if I move the mouse too fast.
Is there any way to make sure to force $(this) not to select more than one element?
Here is my HTML:
<div class="row">
<div class="col-md-4 donation 180">
<div class="box">
<div class="cover">
<h2>Freedom<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
<div class="col-md-4 donation 200">
<div class="box">
<div class="cover">
<h2>Sovereignty<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
<div class="col-md-4 donation 400">
<div class="box">
<div class="cover">
<h2>Royalty<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
</div>
And here is my jQuery:
if($(window).width() < 800 ) {
$(".form").show();
$(".cover").hide();
} else {
$(".donation").each(function() {
$(this).hover(function() {
$(this).children($(".box")).addClass("animated flipInY");
$(this).children($(".box")).children($(".cover")).fadeOut("", function() {
$(this).siblings($(".form")).show();
});
}, function() {
$(this).children($(".box")).removeClass("animated flipInY");
$(this).children($(".box")).children($(".form")).fadeOut("", function() {
$(this).siblings($(".cover")).show();
});
});
});
}
I would appreciate your help, Thank You!
You don't need to use $(this). You can use the value from each.
$(".donation").each(function(i, val) {
alert($(val).attr('class'));
});
I want to trigger the below function on the mouse down event on the class yeti. However,this does not seem to work.
<body>
<div class="gameholder">
<div class="title"></div>
<div class="penguin1"></div>
<div class="penguin2"></div>
<div class="penguin3"></div>
<div class="penguin4"></div>
<div class="penguin5"></div>
<div class="penguin6"></div>
<div class="penguin7"></div>
<div class="penguin8"></div>
<div class="yeti"></div>
</div>
<script type="text/javascript">
$(document).ready( function() {
//This code will run after your page loads
$('body').on('mousedown', '.yeti', function(event) {
alert("Yaaaarrrr!");
});
});
</script>
</body>
Your code is correct and should work (I just tested with jQuery 2). Make sure to put something inside the yeti div or make it a fixed size (width and height).
Now it will work perfectlly..:)
<body>
<div class="gameholder">
<div class="title"></div>
<div class="penguin1"></div>
<div class="penguin2"></div>
<div class="penguin3"></div>
<div class="penguin4"></div>
<div class="penguin5"></div>
<div class="penguin6"></div>
<div class="penguin7"></div>
<div class="penguin8"></div>
<div class="yeti"></div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$(".yeti").mousedown(function(){
alert("yeti pressed");
});
});
});
</script>
</body>
I have a page with the following structure:
<div id="about" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
<div id="films" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
<div id="projects" class="section">
<div class="button">
<img src="/images/arrow.png">
</div>
</div>
I would like that when clicking on the image, you will be scrolled to the end of the <div> where the <img>is located.
I have stated with this code but it works only for the first image.
function go_to(){
$("body,html").animate({scrollTop: $('.section').height()}, 900, "easeInOutExpo");
}
$(document).ready(function(){
var go_to_div = $('.button img');
$(go_to_div).click(function(event) {
go_to()
});
});
If necessary, I can change the HTML structure. Thank you!!
Because for scrollTop property, you need to give a value to go there. Your $('.section').height() code allways gives the same value so it kinda stuck. Try this instead
function go_to(section){
var pos = section.position();
$("body,html").animate({scrollTop: section.height() + pos.top}, 900, "easeInOutExpo");
}
$(document).ready(function(){
$('.button img').click(function(event) {
go_to($(this).closest(".section"));
});
});
FIDDLE
$(document).ready(function () {
$('.box').on('click', function() {
var elmDay = $(this).data('day');
$('.' + elmDay).toggleClass('display');
});
});
Please, visit this site to understand -> http://jsfiddle.net/g42d8pjp/
When you click in the first box, one text with background red will show, right?, them if you click in the other box, other text with a red background will show too.
Can i make the first text with the red background disappear if the second box is clicked??
Add a common class for the boxes like 'day'
<div class="row">
<div data-day="thursday" class="box thursday-box col-xs-6 col-sm-3">
<img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
</div>
<div data-day="friday" class="box friday-box col-xs-6 col-sm-3">
<img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
</div>
<div class="col-9">
</div>
</div>
<div class="thursday display day">
<h1 class="title">SOMETHING1 </h1>
<p>SOMETHING1</p>
</div>
<div class="friday display day">
<h1 class="title">SOMETHING2</h1>
<p>SOMETHING2</p>
</div>
Hide elements with this class attached on click.
$(document).ready(function () {
var days = $('.day');
$('.box').on('click', function() {
var elmDay = $(this).data('day');
days.addClass('display');
$('.' + elmDay).toggleClass('display');
});
});
Why don't you just change the css via javascript/jquery? Here is a quickly done updated jsfiddle:
http://jsfiddle.net/ykoo873e/
You can just set all the other styles for those divs to 'display: none' and only set the one:
$('.display').css('display', 'none');
$('.display.' + elmDay).css('display', 'block');
Though you could also just dynamically change the html inside the div like so:
http://jsfiddle.net/m5hL220d/
Try this:
http://jsfiddle.net/g42d8pjp/1/
<div id="thursday" class="thursday display">
<h1 class="title">SOMETHING1 </h1>
<p>SOMETHING1</p>
</div>
<div id="friday" class="friday display">
<h1 class="title">SOMETHING2</h1>
<p>SOMETHING2</p>
</div>
$(document).ready(function () {
$('.box').on('click', function() {
var elmDay = $(this).data('day');
if (elmDay == 'thursday')
{
$('#thursday').show();
$('#friday').hide();
}else
{
$('#friday').show();
$('#thursday').hide();
}
//$('.' + elmDay).toggleClass('display');
});
});
How can I make this toggle fadein fadeout applies on each itemsblock? when I click anyone, it applies all of them.
Could someone please help ? Thanks
Online Sample
<div class="items">
<div class="warp">
<span class="change">Tester</span>
<span class="click">expand</span>
</div>
<div class="invisible">
<div class="red"> red </div>
<div class="black"> black </div>
</div>
</div>
<div class="items">
<div class="warp">
<span class="change">Tester</span>
<span class="click">expand</span>
</div>
<div class="invisible">
<div class="red"> red </div>
<div class="black"> black </div>
</div>
</div>
jQuery
$('.invisible').hide();
$('.warp').addClass('bg');
$(".warp").click(function () {
$(".invisible").slideToggle("slow", function () {
if ($(this).is(':visible')) {
$('.warp').removeClass('bg');
}else{
$('span.click').css('visibility', 'visible');
$('.warp').addClass('bg');
}
});
$('span.click').css('visibility', 'hidden');
});
How can I make this toggle fadein fadeout applies on each itemsblock?
when I click anyone, it applies all of them.
This is because you use $(".invisible") which selects all elements with the class invisible. You have to find the element related to your toggle element(your .warp element), which in your case would be like this: $warp.next(".invisible").
See the updated FIDDLE.
Updated your jQuery code:
$(".warp").click(function () {
var $warp = $(this);
$warp.next(".invisible").slideToggle("slow", function () {
if ($(this).is(':visible')) {
$warp.removeClass('bg');
}else{
$warp.find('span.click').css('visibility', 'visible');
$warp.addClass('bg');
}
});
$warp.find('span.click').css('visibility', 'hidden');
});
HERE: jsfiddle
jquery:
$('.invisible').hide();
$(".warp").click(function () {
$(this).next('div').slideToggle("slow", function () {
$(this).prev('div').toggleClass('bg');
$(this).prev('div').find('.click').slideToggle("fast", function () {});
});
});