I need some help with this project. I'm trying to get a picture as a background on a div element, that could be expanded and hid when clicked on. I don't know how to make the image a background for the div element, and I don't know how to make the div toggle from left to right.
I really appreciate any help. Thank you.
<html>
<body>
<div id="couch">Info about this couch</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="C:\Users\Jason\Desktop\CSS\HTMLBook/app.js" type="text/javascript" charset="utf-8"></script>
</html>
#couch {
height: 95px;
width: 65px;
background-color: silver;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background-image: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg");
}
Add this code to your page
<script>
$( "#couch" ).click(function() {
$( "#couch" ).toggle(1000);
});
</script>
test : http://jsfiddle.net/Ss86Q/1/
I have looked through your code and formatted it while also setting up a jfiddle. I hope this works and if not hopefully its a starting point. Please check my JSfiddle.
http://jsfiddle.net/jmcH8
$(document).ready(function(){
$("button").click(function(){
$("#couch").toggle('slow');
});
});
JSBIN DEMO
At first, the CSS
#couch {
height: 95px;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background-image: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
Now Jquery:
If you want to change the width:
$("#couch").click(function() {
$(this).toggleClass("big");
});
Add this to your css:
.big {
width: 400px !important;
}
If you want to hide the div itself
$("#couch").click(function() {
$(this).toggle();
});
In this example, if you toggle the div is hidden. How you want to restore it back.
I guess you are looking to collapse the div and expand it again.
In that case, change the height of the div based on click.
Hope its useful to you :)
Please try inserting the scripts inside the <head></head> tag
try this
html
<body>
<div id="couch" class="collapseRemoved">Info about this couch</div>
</body>
css
#couch {
background-color: silver;
border: solid;
top: 40%;
position: relative;
border-radius: 8px;
background: url("http://www.rowefurniture.com/uploads/images/sofas/thumb/C570.jpg") 100% 100%;
background-size:100%
}
.collapseRemoved{
width:200px;
height:100px;
}
.collapse{
width:100px;
}
js code
$("#couch").click(function(){
if($(this).hasClass("collapse")){
$(this).removeClass("collapse").addClass("collapseRemoved");
}else{
$(this).removeClass("collapseRemoved").addClass("collapse");
}
});
Related
I searched for hours trying to find a solution for creating a body background image clickable.
I managed to find some similar questions/answers here on stackoverflow but I don't know how to apply them.
So far I think that the code below might help but I cannot seem to understand how to use it on my website.
$('body').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
Can someone please explain how can I have this working on 007soccerpicks.com? I need the body background image clickable except for the <div id="container"> which is the content area of the website.
Thank you very much!
The script you have setup will click the entire document if wrapped inside the body element. One way to get around this is to use a fixed element in the background with the body logic in another wrapper.
<body>
<div class="body-clickable"></div>
<div class="main-content">
</div>
</body>
<style>
.body-clickable
{
position: fixed;
top: 0;
left: 0;
z-index: 1;
height: 100%;
width: 100%;
background-image: url('image.png');
}
.main-content {
margin: 0 auto;
width: 1000px;
top: 0;
left: 0;
position: relative;
z-index: 2;
}
</style>
<script>
$('.body-clickable').click(function(e){
if (e.target === this) {
window.location = "link.html"
}
});
</script>
You could also avoid using a script and actually just make the 'body-clickable' a link.
#box-link {
position: absolute;
top: 8px;
left: 20px;
width: 83px;
height: 83px;
background-color: transparent;
border: 1px solid yellow; }
.box1 {
position: relative;
margin: 20px 0 20px 40px;
padding: 5px 0; width: 300px;
height: 300px;
background-image: url('https://lh3.googleusercontent.com/-Y8Qx-xfqufE/VOIccUtbhpI/AAAAAAAABDI/x5lTXX_Zlrs/s2048/cool-and-stylish-girls-wallpapers-for-fb-cool-and-stylish-girls-with-guitar-6413-sadredheartlovequotesforfacebooktimelinecoverx.jpg');
background-repeat: no-repeat;
}
<body>
<div class="box1">
<a id="box-link" href="https://www.facebook.com/"></a>
<p>The background of this box is an image.</p>
</div>
</body>
Every method that I have tried to create a bounce effective when my div slides up and down does not work. Any help would be greatly appreciated!
Here's my code
$(document).ready(function() {
$('#button').click(function() {
$("#div").slideToggle();
$("#div").effect('bounce', 300);
});
});
div#div {
width: 100px;
height: 100px;
background: #ccc;
border: 1px solid #000;
position: relative;
display: none;
top: 30px;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">click</button>
<div id="div"></div>
Thanks for any help!
https://jsfiddle.net/zs1u8b5c/
What you wrote works as intended. However, as that is not part of jQuery's main API you need to include the UI script as well.
Updated jsFiddle: https://jsfiddle.net/1gu4u8dp/
Which would be:
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
(preferably make a local copy)
When I animate a div using jQuery, the div gets bigger, but the picture inside of it stays the same size.
How to I make the div, as well as the image inside of it, get bigger but remain to scale?
Do I actually have to address everything that is in the stylesheet, in the .animate() method? Not just width and height? If so, how do I manipulate the url("someImage.jpg") that is in the stylesheet.
Here is some sample code that illustrates what I am talking about:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#one { /* Second info block */
float: right;
height: 350px;
width: 275px;
border: 1px solid black;
border-radius: 5px;
margin-left: 10px;
margin-top: 35px;
margin-right: 175px;
background: url(http://magazine8.com/wp-content/uploads/2014/02/most-beautiful-flowers.jpg) no-repeat;
background-size: 300px;
background-position: center;
}
</style>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="one"></div>
<script>
$("#one").click(function() {
$(this).animate({
width: "500px",
height: "700px",
}, 1000);
});
</script>
</body>
</html>
I think you want something like this:
Just increase your background-size: xx px; or (backgroundSize:"xx px") along width & height changes.
$("#one").click(function() {
$(this).animate({
width: "500px",
height: "700px",
backgroundSize: "500px",
}, 1000);
});
#one {
/* Second info block */
float: right;
height: 350px;
width: 275px;
border: 1px solid black;
border-radius: 5px;
margin-left: 10px;
margin-top: 35px;
margin-right: 175px;
background: url(http://magazine8.com/wp-content/uploads/2014/02/most-beautiful-flowers.jpg) no-repeat;
background-size: 300px;
background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="one"></div>
Note : I have just randomly added 500px, change as per your requirement.
You've set a fixed background size of 300px so it's not going to change whatever size the containing div is. Try this in your CSS:
#one {
/* your styles */
background: url('http://magazine8.com/wp-content/uploads/2014/02/most-beautiful-flowers.jpg') no-repeat;
background-size: contain;
background-position:
}
Setting the background size to contain will make the image always as large as possible to fill the container, while maintaining the original aspect ratio.
Edit
Since your preferred scale isn't 100%, you can use a percentage size. About 110% is what you're looking for to keep the same scale.
background-size: 110%;
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
When i click the button, it will be navigate to another page, before the page loading completely i want to show the loading gif image.(without using Ajax)
First right after the body tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your css:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
And finally add this javascript to your page (preferably at the end of your page, before closing body tag of course):
$(window).load(function() {
$('#loading').hide();
});
This is what I did
1.) Set div tag over body and give it an ID of 'page'.
2.) After that, place a div tag next to the 'page' div tag and give it an ID of 'loading'.
<div id="page">
<body>
//whatever you page code is
</body>
</div><div id="loading"></div>
3.) Setup CSS.
<style type="text/css">
#page {display: block;}
#loading {display: none;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.5);
background-image: url('../Images/nameofgifimage.gif');
background-repeat: no-repeat;
background-position: center;}
</style>
4.) Finally, setup your JQuery. I am using VB.net so for the ID, I had to get the ClientID.
<script type='text/javascript' src="../Scripts/jquery-1.4.1.min.js"></script>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%= btnSearch.ClientID %>").click(function () {
$('#loading').show();
return true;
});
});
</script>
If this does not work for you, let me know and I will try to figure out what is wrong.
I have a page that I want to show a div overlay with a popup. Basically, like colorbox. But I want this to be permanent. They should not be able to click out of the div. Inside of the div should be contents from popsurvey.com in an iframe. The link I need to frame is this -> http://www.popsurvey.com/s/5gzmqc/0x5513 - How do you recommend this be done? Thanks.
<script>
$(document).ready(function() {
$.colorbox({iframe:true, width:"620", height:"591", href:"http://www.popsurvey.com/s/5gzmqc/4zk4lm?embed=true", opacity: ".3"});
});
</script>
I've created a solution in jquery which is light enough and simple enough to suit your needs (I hope), Clean and simple is usually the best way to do these sort of things and 99.99% of the time it's pretty redundant to use larger plugins or prebuilt solutions.
jsfiddle demo
jsfiddle
The html:
<div id="block"></div>
<div id="iframecontainer">
<div id="loader"></div>
<iframe></iframe>
</div>
The css:
#iframecontainer {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222;z-index: 999999;}
#iframecontainer iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }
#loader {background: url('http://www.calgaryramsrugby.com/images/ajax-loader.gif');background-repeat:no-repeat; width: 250px; height: 250px; margin:auto;}
#block {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
The js:
$(document).ready(function() {
$('#block').fadeIn();
$('#iframecontainer').fadeIn();
$('#iframecontainer iframe').attr('src', 'http://www.popsurvey.com/s/5gzmqc/0x5513');
$('#iframecontainer iframe').load(function() {
$('#loader').fadeOut(function() {
$('iframe').fadeIn();
});
});
});