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>
Related
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 want do a toggle with a button to show and hide a tag(div). So, buttom(toggle) --> to div(show/hide).
window.onload = function(){
var button = document.getElementById('button');
function show(event){
event.target.classList.toggle('hide');
}
button.addEventListener('click', show, false);
}
Because in jQuery is so:
$(document).ready(function(){
$( "#button" ).click(function(){
$( "div" ).toggle( "slow" );
});
});
But in JavaScript?
I do not completely understand your question but I suspect your trouble is with targeting the div which should be hidden or shown.
To do this with jQuery:
HTML
<button class="toggle">Toggle</button>
<div class="text">Hello</div>
Javascript
$(document).ready(function(){
$("button.toggle").click(function(){
$("text").toggle();
});
}
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.
When you click ( ".toggle-button a" ), it adds .close class to itself. And fades in .info-overlay
This works fine, but when you click it again, I want info-overlay to fade out again, and the close class to be removed. But this doesn't work.
Am I missing something here?
http://jsfiddle.net/bazzle/xpS9P/1/
html
<div class="toggle-button">
<a>click</a>
</div>
<div class="info-overlay">
content
</div>
css
.info-overlay{
display:block;
width:100px;
height:100px;
background-color:green;
display:none;
};
js
$( ".toggle-button a" ).click(function() {
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
});
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Use event delegation:
Change
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
to:
$(document).on('click',".toggle-button a.close",function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Because a .click() is attach and forget handler, but .on() is dynamic.
see updated Fiddle
$( ".toggle-button a" ).click(function() {
if($(this).hasClass('close')){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
}else{
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
}
});
reference hasClass()
You could use delegation or just set your logic as following:
DEMO
$(".toggle-button a").click(function () {
$(".info-overlay").fadeToggle(500).toggleClass('close');
});
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