I'm trying to change the height and width of an image when clicked on a certain button. So far I got the basics, but I think I don't have them in the right order. The image and the other text are moving, but the image size isn't changing. Right now it mostly the white space around the image changing.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//image
function shrinkImage() {
$('#dog_image').height(200);
$('#dog_image').width(307);
}
</script>
</head>
<div id="dog_image">
<img src="dog.jpg" alt="turle">
</div>
<div id="image_buttons">
<button type="button" id="shrink" onclick="shrinkImage();">Shrink Image</button>
</div>
This isn't you want?
img{
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//image
function shrinkImage() {
$('#nickel_image').height(200);
$('#nickel_image').width(307);
}
function enlargePic() {
$('#nickel_image').height(450);
$('#nickel_image').width(580);
}
function restorePic() {
$('#nickel_image').height(300);
$('#nickel_image').width(460);
}
</script>
</head>
<div id="nickel_image">
<center><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="turle"></center>
</div>
<div id="image_buttons">
<p>Image:</p>
<button type="button" id="shrink" onclick="shrinkImage();">Shrink Image</button>
<button type="button" id="enlarge" onclick="enlargePic();">Enlarge Pic</button>
<button type="button" id="restore" onclick="restorePic();">Restore Pic</button>
</div>
Here's a nice way to do that :
$('.pictureclass').click(function (e) {
if ($(e.target).hasClass('expanded')) {
$(".pictureclass").removeClass('expanded').stop().animate({
width: 300,
height: 300
}, 300);
} else {
$(".pictureclass").addClass('expanded').stop().animate({
width: $(e.target).attr("width"),
height: $(e.target).attr("height")
}, 200);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="mrbean" class="pictureclass" src="http://2.bp.blogspot.com/-C6KY8tsc8Fw/T-SVFnncxjI/AAAAAAAAANw/FMiNzA8Zecw/s640/mr.bean.jpg" width="50" height="50" />
Related
When you click on the button and on the picture, there should be a shift to the left by 100 pixels, but this does not happen why?
I try to move some elements using Jquery, but it doesn't work.
$(document).ready(function() {
$(".left").click(function() {
let paragraphs = $("p");
$(paragraphs[2]).animate({
left: '100px'
});
})
let images = $("img");
$(images[1]).click(function() {
$(images[1]).animate({
left: "100 px"
});
})
})
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<div class="mega-div">
<p>text1</p>
<img src="images indv4/1images.png">
<p>text2</p>
<img src="images indv4/2images.png">
<p>text3</p>
<img src="images indv4/3images.png">
<p>text4</p>
<img src="images indv4/4images.png">
<p>text5</p>
</div>
<button class="left">Сместить параграфы</button>
</body>
The image should have a position property with relative. Otherwise it left doesn't affect the element. And make sure you type your left values without spaces; 100 px won't work, but 100px will.
$(document).ready(function() {
$(".left").click(function() {
let paragraphs = $("p");
$(paragraphs[2]).animate({
left: '100px'
});
})
let images = $("img");
$(images[1]).click(function() {
$(images[1]).animate({
left: "100px"
});
})
})
img {
position: relative;
}
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<div class="mega-div">
<p>text1</p>
<img src="images indv4/1images.png">
<p>text2</p>
<img src="images indv4/2images.png">
<p>text3</p>
<img src="images indv4/3images.png">
<p>text4</p>
<img src="images indv4/4images.png">
<p>text5</p>
</div>
<button class="left">Сместить параграфы</button>
</body>
I have following HTML code:
.background {
width: 100%;
height: 800px;
margin: 0 auto;
background-image:url("backimage1.jpg");
background-size: cover;
}
<div class="background">
<div class="wrapper">
<div class="box1">
<span class="title">Pozitivan feedback naših klijenata i njihovih potrošača</span><br />
<span class="description">Vrhunski kvalitet naših proizvoda</span>
</div>
</div>
</div>
What I would like is to when hover on "box1"to change background-image to something else. I know that I can't do that with CSS, tried few things with JS, but seems like I'm only able to select parents element, not parents-parent element though. Any suggestions?
document.getElementsByClassName('') can be use to select element by class name.
<html>
<head>
<style>
.background {
width: 100%;
height: 800px;
margin: 0 auto;
background-image:url("backimage1.jpg");
background-size: cover;
}s
</style>
<script type="text/javascript">
function changeBgMouseOver() {
var x = document.getElementsByClassName("background");
x[0].style.backgroundImage = "url('backimage2.jpg')";
}
function changeBgMouseOut() {
var x = document.getElementsByClassName("background");
x[0].style.backgroundImage = "url('backimage1.jpg')";
}
</script>
</head>
<body>
<div class="background">
<div class="wrapper">
<div class="box1" onmouseover="changeBgMouseOver()" onmouseout="changeBgMouseOut()">
<span class="title">Pozitivan feedback naših klijenata i njihovih potrošaca</span><br />
<span class="description">Vrhunski kvalitet naših proizvoda</span>
</div>
</div>
</div>
</body>
</html>
Using jquery hover function - changing the background-color :
In your case you can try this with background-image css property
$(document).ready(function(){
$(".box1").hover(function(){
$(this).parent().css("background-color","coral");
}, function(){
$(this).parent().css("background-color","");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">
<div class="wrapper">
<div class="box1">
<span class="title">Pozitivan feedback naših klijenata i njihovih potrošača</span><br />
<span class="description">Vrhunski kvalitet naših proizvoda</span>
</div>
</div>
</div>
Here is JQ solution for you it's pretty straightforward:
$(".box1").hover(function(){
$('.background').css("background", "url(https://placebear.com/200/300)");
}, function(){
$('.background').css("background", "url(https://placebear.com/300/300)");
});
.background {
width: 100%;
height: 800px;
margin: 0 auto;
background-image:url("https://placebear.com/300/300");
background-size: cover;
}
.box1 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">
<div class="wrapper">
<div class="box1">
<span class="title">Pozitivan feedback naših klijenata i njihovih potrošača</span><br />
<span class="description">Vrhunski kvalitet naših proizvoda</span>
</div>
</div>
</div>
Just using ".closest()" should be fine, ".parent().parent()" could also be a solution.
$(document).ready(function(){
$(".box1").mouseover(function(){
$(this).closest(".background").css("background-image","url('anotherimage.jpg')");
});
});
$(document).ready(function(){
$(".box1").mouseover(function(){
$(this).parent().parent().css("background-image","url('anotherimage.jpg')");
});
});
I am trying to use jQuery ready function for multiple ids so that they show and hide individually without writing the same type again and again. When I try to use it on the same line it opens all the drawings all together. The code looks something like this-
<script type="text/javascript">
$(document).ready(function(){
$('#p1','#p2', '#p3','#p4').hide();
$('#p1-show','#p2-show','#p3-show','#p4-show').click(function(){
$('#p1','#p2','#p3','#p4').show();
});
$('#p1-hide','#p2-hide','#p3-hide','#p4-hide').click(function(){
$('#p1','#p2','#p3','#p4').hide();
});
});
</script>
Your function hides all of them. If you want to hide the drawing based on which show/hide button is clicked, you can use $(this) to find the corresponding drawing.
The exact code will depend on how your elements are structured, but the idea is to use $(this) to target the element that was clicked, and from there find the element you want to hide.
Here's an example:
$(document).ready(function(){
$('#p1, #p2, #p3, #p4').hide();
$('#p1-show, #p2-show, #p3-show, #p4-show').click(function(){
$(this).parent().find('p').show();
});
$('#p1-hide, #p2-hide, #p3-hide, #p4-hide').click(function(){
$(this).parent().find('p').hide();
});
});
div {
margin: 10px;
padding: 10px;
background-color: #eee;
border-radius: 10px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="p1">First Drawing</p>
<button id="p1-show">Show</button>
<button id="p1-hide">Hide</button>
</div>
<div>
<p id="p2">Second Drawing</p>
<button id="p2-show">Show</button>
<button id="p2-hide">Hide</button>
</div>
<div>
<p id="p3">Third Drawing</p>
<button id="p3-show">Show</button>
<button id="p3-hide">Hide</button>
</div>
<div>
<p id="p4">Fourth Drawing</p>
<button id="p4-show">Show</button>
<button id="p4-hide">Hide</button>
</div>
The previous answers will work, but in case there are many such drawings then giving an #id to all those becomes badly repetitive and should be avoided. Following is a code snippet to make it more robust without much hard coded #ids.
$(function(){
$('.toggle-btn').on('click', function(){
var root = $(this).closest(".picture-container");
var img = $(root).find("img");
$(img).toggle();
});
});
body > div {
margin: 10px;
padding: 10px;
background-color: #eee;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="picture-container">
<button class="toggle-btn">Show/Hide</button>
<div>
<img src="http://24.media.tumblr.com/tumblr_lggvvf2mCm1qgnva2o1_500.gif">
</div>
</div>
<div class="picture-container">
<button class="toggle-btn">Show/Hide</button>
<div>
<img src="http://24.media.tumblr.com/tumblr_lggvvf2mCm1qgnva2o1_500.gif">
</div>
</div>
<div class="picture-container">
<button class="toggle-btn">Show/Hide</button>
<div>
<img src="http://24.media.tumblr.com/tumblr_lggvvf2mCm1qgnva2o1_500.gif">
</div>
</div>
You really don't need all of these selectors you have. It's overkill.
You should have your markup all the same for each 'drawing' it makes replication of this 'module' much easier for you also.
$(document).ready(function(){
//this hides all of your <p> on page load
$('p').hide();
//this adds the click event to all the buttons with 'show'
$('.show').on('click', function(){
$(this).parent().find('p').show();
});
$('.hide').on('click', function(){
$(this).parent().find('p').hide();
})
});
div {
margin: 10px;
padding: 10px;
background-color: #eee;
border-radius: 10px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>1st Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div>
<p>2nd Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div>
<p>3rd Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div>
<p>4th Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>
<div>
<p>5th Image</p>
<button class="show">show</button>
<button class="hide">hide</button>
</div>
I'm looking to add a gif loading onclick or to delete "changing text on click" with an animation with the same button characteristics and a gif overlayed (eg. Searchbox from airbnb.com) How can i do it?
Thank you!
<input onclick="change()" type="submit" class="submit-form" value="Log in" id="myButton1">
<script type="text/javascript">
function change()
document.getElementById("myButton1").value = "Logging in...";
}
</script>
try with this below code which is having loading image and text as well.
$('#myButton1').click(function(){
$('#myButton1').hide();
$('.load').addClass('loading');
setTimeout(function () {
$('.load').removeClass('loading');
$('#myButton1').show();
}, 2000);
});
.loading{
background-image : url('http://www.fotos-lienzo.es/media/aw_searchautocomplete/default/loading.gif');
background-repeat:no-repeat;
}
.loading:after {
content: "Logging in...";
text-align : right;
padding-left : 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="submit" class="submit-form" value="Log in" id="myButton1">
<div class="load"></div>
<script type="text/javascript">
function change() {
document.getElementById("myButton1").style.background='#000000';
}
</script>
As I can see from your question tags you using JQuery
function change()
$("#myButton1").css({
background-image:url('PATH/TO/LOADING/IMAGE.gif')
});
}
and after finish loading you can create a function to stop loading
function stopLoading()
$("#myButton1").css({
background-image:'none'
});
}
Sorry for the image, it's background is not transparent. I just hope atleast it will give you an idea.
https://jsfiddle.net/3pmpqpwj/
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<img src='http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif' id='overlay' style="display:none;" />
<button id="searchbtn" class="btn btn-default" type="button" onclick="change(); alert('test');">Log In</button>
CSS
#overlay{
position: absolute;
width: 30px;
height: 30px;
top: 2px;
z-index: 3;
left: 32px;
}
JS
$('#searchbtn').click(function(){
$(this).html("Logging in...").prop('disabled',true);
$("#overlay").show();
});
I have a number of buttons in my html. Each button referring to a particular DIV. I want an easy way to hide the previously open DIV when another button is clicked. So far I have written a code in jquery, but I have a strange feeling that am putting in a lot of code into a simply achievable task. Is there a simpler way to do this than what I have tried to accomplish?
Here is what I have done so far.
My HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TODO supply a title</title>
<meta name="viewport" content="width=device-width"/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
</head>
<body>
<div id="body">
<input type="button" name="division1" value="div1" class="buttons" id="button1"/>
<input type="button" name="division2" value="div2" class="buttons" id="button2"/>
<input type="button" name="division3" value="div3" class="buttons" id="button3"/>
<input type="button" name="division4" value="div4" class="buttons" id="button4"/>
<input type="button" name="division5" value="div5" class="buttons" id="button5"/>
<input type="button" name="division6" value="div6" class="buttons" id="button6"/>
<div id="div1" class="divs"></div>
<div id="div2" class="divs"></div>
<div id="div3" class="divs"></div>
<div id="div4" class="divs"></div>
<div id="div5" class="divs"></div>
<div id="div6" class="divs"></div>
</div>
</body>
</html>
My CSS:
#body{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
}
.buttons{
width: 10%;
height: 5%;
position: relative;
left: 10%;
cursor: pointer;
z-index: 500;
}
.divs{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}
#div1{
background-color: #377D9F;
}
#div2{
background-color: #02B0E6;
}
#div3{
background-color: #4b9500;
}
#div4{
background-color: #aaa;
}
#div5{
background-color:#aa0000;
}
#div6{
background-color: aquamarine;
}
My Jquery:
$(document).ready(function () {
$("#button1").click(function () {
$('#div1').toggle(100);
$("#div2,#div3,#div4,#div5,#div6").hide();
});
$("#button2").click(function () {
$("#div2").toggle(100);
$("#div1,#div3,#div4,#div5,#div6").hide();
});
$("#button3").click(function () {
$("#div3").toggle(100);
$("#div1,#div2,#div4,#div5,#div6").hide();
});
$("#button4").click(function () {
$("#div4").toggle(100);
$("#div1,#div2,#div3,#div5,#div6").hide();
});
$("#button5").click(function () {
$("#div5").toggle(100);
$("#div1,#div2,#div3,#div4,#div6").hide();
});
$("#button6").click(function () {
$("#div6").toggle(100);
$("#div1,#div2,#div3,#div4,#div5").hide();
});
});
I kind of have around 50 DIV's in my html like the above ones. And I think using the above JQUERY is a waste of coding lines. I know there will be a better way to do this. My code seems to work well, but is there any way in jquery to just hide the previous DIV, no matter which button user clicks?
$(document).ready(function(){
$(".buttons").click(function () {
var divname= this.value;
$("#"+divname).slideToggle().siblings('.divs').hide("slow");
});
});
Going with this sentence I kind of have around 50 DIV's in my html like the above ones
This would be a lot more clean as well as convenient if you use a select tag, instead of using button to show and hide each div
Demo
HTML
<select id="show_divs">
<option>Select to show a div</option>
<option value="1">Show 1</option>
<option value="2">Show 1</option>
</select>
<div class="parent">
<div id="show1">This is the first div</div>
<div id="show2">This is the second div</div>
</div>
jQuery
$('#show_divs').change(function() { //onChange execute the function
var showDiv = $(this).val(); //Store the value in the variable
$('div.parent > div').hide(); //Hide all the div nested inside .parent
$('#show' + showDiv ).show(); //Fetch the value of option tag, concatenate it with the id and show the relevant div
});
CSS
div.parent > div {
display: none; /* Hide initially */
}
If you want to avoid using id's, you can also create your custom attribute, like data-show="1" and data-show="2" so on...
Try this
$(document).ready(function() {
$(".divs").hide();
$(".buttons").click(function() {
$(".divs").hide().eq($(this).index()).show();
});
});
DEMO
<input type="button" value="div1" class="buttons" id="button1" />
<input type="button" value="div2" class="buttons" id="button2" />
<input type="button" value="div3" class="buttons" id="button3" />
<input type="button" value="div4" class="buttons" id="button4" />
<input type="button" value="div5" class="buttons" id="button5" />
<input type="button" value="div6" class="buttons" id="button6" />
<div id="div1" class="divs">div1</div>
<div id="div2" class="divs">div2</div>
<div id="div3" class="divs">div3</div>
<div id="div4" class="divs">div4</div>
<div id="div5" class="divs">div5</div>
<div id="div6" class="divs">div6</div>
<script language="javascript">
$(document).ready(function () {
$(".buttons").click(function () {
$('.divs').hide();
$('#div'+$(this).attr('id').replace('button','')).toggle(100);
})
})
</script>