This code is using backstretch plugin (http://srobbin.com/jquery-plugins/jquery-backstretch/)
This should stretch background.jpg which is called by
if($( ".container" ).length > 0) {
$.backstretch("/images/background.jpg");
Is above the same as this then?
$( "body" ).append( "<div class='bg' id='backstretch'>
<img src='/images/background.jpg' />
</div>" );
no, $.backstretch() calls the plugin, which does more as just appending the image with markup. see https://github.com/srobbin/jquery-backstretch/blob/master/jquery.backstretch.js
Related
https://www.evdemimar.com/oturma-odasi-renk-secimi/
Look this website and the feature. If you click on the color the wall color is changing dynamically.
how to do this feature.
Cut out the image's background in software such as Photoshop and save it as a transparent PNG;
Place this image inside an HTML div;
Change background of the div dynamically using jQuery:
jQuery:
$( '.colour-1' ).on( 'click', function() {
$( 'div.foo').css( 'background-color', '#00CCFF' );
} );
$( '.colour-2' ).on( 'click', function() {
$( 'div.the-one-that-contains-the-img').css( 'background-color', '#999999' );
} );
HTML:
<div class="foo">
<img src="transparent-background-room-image.png" />
</div>
I have 3 tabs for a reddit page I am making. When I click any of the tabs I want the following things to happen ONLY in their respective tabs:
<div>'s with specific classes will be created in a loop until xTcount
Reddit function I have written will populate those <div>'s with content
I'm having trouble getting the <div> structure to create OnClick though. Here is what I want my HTML structure to look like (I want x number of identical ones).
<div class="newsContainer">
<div class="redditThumbnail clearfix floatleft"></div>
<div class="articleHeader read clearfix">
<div class="actionmenuHeader">
<div class="userNameContainer"></div>
<div class="redditFlair"></div>
<div class="subRedditName"></div>
<div class="redditDate"></div>
<div class="redditScore">
<i class="redditUpvote material-icons">
keyboard_arrow_up
</i>
</div>
</div>
<p class="redditTitle clearfix mediaTitle news"></p>
<div class="redditPost mediumtext"></div>
</div>
</div>
And here is my JQuery script that runs OnClick of another element.
var divPerPage = 10;
for(var i = 0; i < divPerPage; i++) {
$( "<div class='listrow news nomargin'></div>" ).appendTo( "#redditCardBox1" );
$( "<div class='newsContainer'></div>" ).appendTo( ".listrow" );
$( "<div class='redditThumbnail clearfix'></div>" ).appendTo( ".newsContainer" );
$( "<div class='articleHeader read clearfix'></div>" ).appendTo( ".newsContainer" );
$( "<div class='actionmenuHeader'></div>" ).appendTo( ".articleHeader" );
$( "<div class='userNameContainer'></div>" ).appendTo( ".actionmenuHeader" );
$( "<div class='redditFlair'></div>" ).appendTo( ".actionmenuHeader" );
$( "<div class='subRedditName'></div>" ).appendTo( ".actionmenuHeader" );
$( "<div class='redditDate'></div>" ).appendTo( ".actionmenuHeader" );
$( "<div class='redditScore'></div>" ).appendTo( ".actionmenuHeader" );
$( "<i class='redditUpvote material-icons'>keyboard_arrow_up</i>" ).appendTo( ".redditScore" );
$( "<p class='redditTitle clearfix mediaTitle news'></p>" ).appendTo( ".articleHeader" );
$( "<div class='redditPost mediumtext'></div>" ).appendTo( ".articleHeader" );
}
Primary issue:
Each individual div is being created 10 times instead of creating each div once and then starting over 10 times.
Any help is appreciated! As always.
Your problem is your use of appendTo(). Those calls are going to find every instance of those classes and append to each of them. You can simplify this greatly by just cloning the entire element to be copied and then append it to the container, like this:
var divPerPage = 10;
for (var i = 0; i < divPerPage; i++) {
$(".listrow").eq(0).clone().appendTo("#redditCardBox1");
}
If for some reason you can't do that and you need to individually append the elements, you just need to rework how you are appending to only append to the instances of those classes in the new row.
Something like this:
var divPerPage = 10;
for (var i = 0; i < divPerPage; i++) {
var row = $("<div class='listrow news nomargin'></div>").appendTo("#redditCardBox1");
$("<div class='newsContainer'></div>").appendTo(row.find(".listrow"));
$("<div class='redditThumbnail clearfix'></div>").appendTo(row.find(".newsContainer"));
$("<div class='articleHeader read clearfix'></div>").appendTo(row.find(".newsContainer"));
$("<div class='actionmenuHeader'></div>").appendTo(row.find(".articleHeader"));
$("<div class='userNameContainer'></div>").appendTo(row.find(".actionmenuHeader"));
$("<div class='redditFlair'></div>").appendTo(row.find(".actionmenuHeader"));
$("<div class='subRedditName'></div>").appendTo(".actionmenuHeader"));
$("<div class='redditDate'></div>").appendTo(row.find(".actionmenuHeader"));
$("<div class='redditScore'></div>").appendTo(row.find(".actionmenuHeader"));
$("<i class='redditUpvote material-icons'>keyboard_arrow_up</i>").appendTo(row.find(".redditScore"));
$("<p class='redditTitle clearfix mediaTitle news'></p>").appendTo(row.find(".articleHeader"));
$("<div class='redditPost mediumtext'></div>").appendTo(row.find(".articleHeader"));
}
I'd use #dave's approach of cloning the nodes.
For the first row, though (assuming you don't already have it in the HTML already), I'd just append the HTML all in one string:
$('#redditCardBox1').append('<div class='listrow news nomargin'><div class="newsContainer"><div class="redditThumbnail clearfix floatleft"></div><div class="articleHeader read clearfix"><div class="actionmenuHeader"><div class="userNameContainer"></div><div class="redditFlair"></div><div class="subRedditName"></div><div class="redditDate"></div><div class="redditScore"><i class="redditUpvote material-icons">keyboard_arrow_up</i></div></div><p class="redditTitle clearfix mediaTitle news"></p><div class="redditPost mediumtext"></div></div></div></div>');
I don't think you need to break it up like that.
I have this script in jquery which makes a hover image (in the hover replaces the images) .
The specific question is how do I place a transition ?
$( "figure.salud img" ).hover(
function() {
$( this ).attr("src","img/salud5.jpg");
},function() {
$( this ).attr("src","img/salud5-gris.jpg");
}
);
Are you looking for something as this ,do let me know if something else was expected!
$( ".salud img" ).hover(
function() {
$( this ).fadeOut(0).attr("src","https://pmcdeadline2.files.wordpress.com/2014/06/yahoo-logo.jpg").fadeIn(500);
},function() {
$( this ).fadeOut(0).attr("src","http://velocityagency.com/wp-content/uploads/2013/08/go.jpg").fadeIn(500);
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="salud">
<img src="http://velocityagency.com/wp-content/uploads/2013/08/go.jpg" width="160" height="160"/>
</div>
JS FIDDLE: https://jsfiddle.net/nhwuh7pb/9/
I have 2 divs which i need to toggle them with one button, the first one slide Up and the second one slide down.
HTML
dasdasdasdasd
<button>Toggle 'em</button>
JQuery
$( "button" ).click(function() {
$( "#nav" ).slideUp();
});
Can anybody help me out?
JSFIDDLE
You can use class instead of id and make one div hidden by using display:none;
html:
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px;display:none;"></div>
<button>Toggle 'em</button>
jquery
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
Demo
Use a class or then name attribute instead of an id .
HTML
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px"></div>
<button>Toggle 'em</button>
JS
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
JSFiddle
PS
Never use the same id for two elements. An id should be unigue.
You need to hide one element to toggle them differently
$( "button" ).click(function() {
$( "#nav1" ).slideToggle( "slow" );
$( "#nav2" ).slideToggle( "slow" );
});
Demo
Try this,
Html
<div id="nav1" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div id="nav2" style="background:gray; height:200px"></div>
And some CSS
#nav1{
display:none;
}
Script
$( "button" ).click(function() {
$( "#nav1,#nav2" ).slideToggle( "slow" );
});
Demo
Duplicate ids are invalid html, you should rather use class instead.
You will also need to hide one element in beginning for toggling.:
$( "button" ).click(function() {
$( ".nav" ).slideToggle( "slow" );
});
Working Demo
It seems that your div has an id of nav. In order to select 2 divs, you can try assigning the same class name to both, for example:
<div class="nav"></div> (x2)
Then change your jQuery to:
$('.nav').slideUp();
That way, jQuery knows to select both divs and slide them up.
1.This is my code here i have a div class inner which is dynamically loaded using ajax call
and after ajax call if i click the hide button it is not working.
But its working perfectly before ajax request.
so in order to overcome i just add a outer div and hide that div this time it works..
I don't know why?
$( "#inner" ).replaceWith( data ); /*and*/ $( "#inner" ).hide(); //not working
$( "#inner" ).replaceWith( data ); /*and*/ $( "#outer" ).hide(); //working
Why we cant use the same div class ?
<html>
<div id="outer">
<div id="inner">
<br /> <br /> <br />
<div> <input type="button" value="signup" onclick="changeval();"/>
</div>
<br /> <br />
</div>
</div>
<input type="button" value="hide" onclick="onhide();"/>
<script language="javascript">
function changeval(context)
{
var typeval="sdsf";
var url="sdfsdf";
$.ajax({
type:'POST',
url:'htp://sscs/registration',
data:'&typeval='+typeval+'&url='+url,
success:function(data) {
$( "#inner" ).replaceWith( data );
}
});
}
function onhide()
{
$( "#inner" ).hide();
}
</script>
Use .html()
$("#inner").html(data);
instead of .replaceWith() as
Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.
DEMO of replaceWith, Here you can see div with second class is replace with input content.
It doesn't work because you replace the <div id="inner">.
Including the div and its ID. <div id="outer"> remains so your other hide works, it still finds that div.
Use like this:
$( "#inner" ).replaceWith( function(){
return $(this).data();
} );
After your ajax call the #inner-div does not exist anymore. You are replacing it with the response from your ajax request .
You could use $("#inner").html(data); to keep the div and then hide it once you received the response.