I have a large image, and a bunch of divs that I'm using as fake buttons on top of said image. Currently, I'm using absolute positioning to place the divs where I want them to be, but I've got a lot of divs, and finding the x/y coords by trial and error is time I don't want to take. Is there an easier way to position them, or am I stuck?
I'm using jQuery and Javascript in this project, so these can be used for solutions.
CSS:
#test0 {
position:absolute;
left:381px;
bottom:100px;
}
HTML:
<div id="image">
<div id="test0" class="button" onclick="$('#modal').dialog('open');" style="postion:absolute">
Click me to test Modal!
</div>
<div id="test1" class="button" onclick="$('#modal').dialog('open');" style="postion:absolute">
Click me to test the same Modal!
</div>
<img src="testImage.jpg" alt="testtest" />
</div>
HTML:
<div id="image">
<div id="container-of-fake-divs">
<div class="fake-div">FAKE DIV</div>
<div class="fake-div">FAKE DIV</div>
</div>
<img src="image.jpg" />
</div>
STYLE:
#image { position:relative; }
#container-of-fake-divs { position:absolute; top:0; left:0; }
.fake-div { display:block; }
Related
I have an image that when hover, a div with an overlay will fade in and out.
<div id="img-one">
<div id="overlay-one">
<div class="card-overlay-text">
<p>Enlarge Image<p></div>
</div>
<img src="assets/img/card_one.jpg" alt="" />
</div>
However, I have multiple images and I need to repeat this code for each of these images (assigned with different div's id). How can I get, when hover on specific image.
The code only run on individual image only?
$(function() {
$('#img-one').hover(function() {
$('#overlay-one').stop(true,true).fadeIn();
}, function() {
$('#overlay-one').stop(true,true).fadeOut();
});
});
Use general class in all the image containers div's and overlay div's, like :
<div id="img-one" class='img-container'>
<div id="overlay-one" class='overlay'>
...
</div>
</div>
Then adjust you JS code to invoke just related overlay :
$(function() {
$('.img-container').hover(function() {
$('.overlay', this).stop(true,true).fadeIn();
}, function() {
$('.overlay', this).stop(true,true).fadeOut();
});
});
Hope this helps.
$(function() {
$('.img-container').hover(function() {
$('.overlay', this).stop(true,true).fadeIn();
}, function() {
$('.overlay', this).stop(true,true).fadeOut();
});
});
.img-container{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 1<p></div>
</div>
</div>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 2<p></div>
</div>
</div>
<div class='img-container'>
<div class='overlay'>
<div class="card-overlay-text">
<p>Enlarge Image 3<p></div>
</div>
</div>
You'll better use classes. Then do something like this:
$('.main-container').find('.div-class-name').forEach(function(el) {
<bind a handler for each consequent element here>
});
You'll end up with a bunch of handlers that are bound to each individual ".div-class-name" element.
It is recommended to use classes because that is what classes are for and id's are not.
If your case demands some situation where you have no control over the HTML part, you can use wildcards in attribute selectors in some cases. Like div[id^=overlay] to selects all div with id starting with overlay
$(function() {
$('div[id^=img]').hover(function() {
$('div[id^=overlay]',this).stop(true,true).fadeIn();
}, function() {
$('div[id^=overlay]',this).stop(true,true).fadeOut();
});
});
div[id^=img]{
position: relative;
height:100px;
width:100px;
border:1px solid black;
margin:2px;
}
div[id^=img] > div[id^=overlay]{
position:absolute;
background:rgba(0,0,0,.2);
top:0;
left:0;
right:0;
bottom:0;
display:none;
width:100px;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img-one">
<div id="overlay-one">
<div class="card-overlay-text">
<p>Enlarge Image 1<p></div>
</div>
<img width="100" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Raff_House.jpg" alt="" />
</div>
<div id="img-two">
<div id="overlay-two">
<div class="card-overlay-text">
<p>Enlarge Image 2<p></div>
</div>
<img width="100" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Raff_House.jpg" alt="" />
</div>
You can try with the jQuery Easy Overlay Plugin
http://eivissapp.github.io/jquery-easy-overlay/
In the code, you should assign a class to the images, and call this statement (that will work for each image):
jQuery("img.yourclass").hover(function(){
jQuery(this).easyOverlay("start");
}, function(){
jQuery(this).easyOverlay("stop");
});
If you have fontawesome in the page, then execute this before the code above (otherwhise the plugin will use the fontawesome spinner inside the overlay div):
jQuery.fn.easyOverlay.options = { spin: false }
I'm very new to javascript and jQuery and has now got completely stuck despite trying various options. I'm trying to create a expand/collapse section with multiple divs. I would like each div to open and close seperately, with an arrow at the side pointing up or down, depending whether the content is expanded or collapsed.
From the code I have written below, only the first div works correctly. The only thing which happen When you click on the two other divs, is that the arrow in the first div change.
Any help will be greatly appreciated.
Following is the CSS:
#header_background {
background-image: url(header-background.png);
width:748px;
height:43px;
margin-left: -17px;}
#expand_arrow {
display: inline-block;
width: 17px;
height: 18px;
float:left;
margin-left:20px;
padding-left:0px;
padding-top:11px;
background-repeat:no-repeat; }
.sub_header {
color:#204187;
font-weight:bold;
font-size:16px;
vertical-align:middle;
padding-left:4px;
padding-top:12px;
float:left;
text-decoration:none;
}
Here's the attempted javascript and jQuery:
function chngimg() {
var img = document.getElementById('expand_arrow').src;
if (img.indexOf('expand-arrow.png')!=-1) {
document.getElementById('expand_arrow').src = 'images/collapse-arrow.png';
}
else {
document.getElementById('expand_arrow').src = 'images/expand-arrow.png';
}
}
$(document).ready(function(){
$("#header_background").click(function(){
$("#section").slideToggle("slow");
});
});
And here's the HTML
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 1</div>
</div>
<div id="section" style="display:none">
text 1
</div>
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 2</div>
</div>
<div id="section" style="display:none">
text 2
</div>
<div id="header_background" >
<img id="expand_arrow" alt="" src="images/collapse-arrow.png" onclick="chngimg()">
<div class="sub_header" onclick="chngimg()">header 3</div>
</div>
<div id="section" style="display:none">
text 3
</div>
It's only working for the first set of elements because you're using IDs, and IDs have to be unique within the document (page). You could change to using classes and perform some simple DOM traversal to get the corresponding section based on the header that was clicked. Something like this:
$(document).ready(function() {
$('.header_background').click(function(e) {
$(this).next('.section').slideToggle('slow');
var img = $(this).find('img.expand_arrow')[0]; // the actual DOM element for the image
if (img.src.indexOf('expand-arrow.png') != -1) {
img.src = 'images/collapse-arrow.png';
}
else {
img.src = 'images/expand-arrow.png';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 1</div>
</div>
<div class="section" style="display:none">
text 1
</div>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 2</div>
</div>
<div class="section" style="display:none">
text 2
</div>
<div class="header_background" >
<img class="expand_arrow" alt="" src="images/collapse-arrow.png">
<div class="sub_header">header 3</div>
</div>
<div class="section" style="display:none">
text 3
</div>
Look for your next section of the header clicked like so. And change your id for class because ID need to be unique
$(".header_background").click(function(){
$(this).nextAll(".section:first").slideToggle("slow");
});
I am trying to have my background cover the page to create the parallax effect. Its the only thing missing as of now. Each "slide" div should cover the page. Here is the jsfiddle displaying the problem.
For my slides i am using the css styles:
.slide { background-attachment:fixed; width:100%; height:100%;
position: relative; padding:30px;}
and the html
<div class='slide' id='slide1' data-slide='1' data-stellar-background-ratio='0.5'>
<div class='container'>
<div class='row'>
<div class='col-md-6 slide-1-logo'>
<img src="img/MCP-LOGO-64x55.png" class='mainimg'>
</div>
<div class='col-md-6'><h1> Welcome!</h1></div>
</div>
</div>
<a class='button' data-slide='2' title=''></a>
</div>
You're .main class should have
height: 100%.
for the content to stretch fully.
I am trying to create a slider but discovered that if a user were to use CTRL+F, the position and the <div> element's offset changed and so the slider no longer works the way is should.
HTML:
<div style="width:100px; height:150px;">
<div style="width:100px; height:100px; overflow:hidden;">
<div id="slider" style="width:200px; height:100px; right:0; position:relative;">
<div style="width:100px; height:100px; float:left;">visible</div>
<div style="width:100px; height:100px; float:left;">hidden</div>
</div>
</div>
<input id="sliderbuttonprev" type="button" style="float:left;" value="Prev">
<input id="sliderbuttonnext" type="button" style="float:right;" value="Next">
</div>
JavaScript (jQuery):
$(document).ready(function() {
$("#sliderbuttonnext").click(function(){
$("#slider").animate({right:"+=100px"});
});
$("#sliderbuttonprev").click(function(){
$("#slider").animate({right:"-=100px"});
});
});
Is there a way to stop CTRL+ F finding the hidden sections?
jsFiddle Demo
You cannot prevent browsers from finding hidden content, but you could potentially disable it for the slides.
For example, if you specify the content within CSS, the browser won't move the content. For example, see here > Is it possible to disable Ctrl + F of find in page?
<div class="word-foobar"></div>
.word-foobar:before {
content: "Foobar";
}
As nickf has suggested, you could easily write some JavaScript code to convert actual text to this method.
http://jsfiddle.net/TaZL2/2/
If you change your animation to marginLeft instead of the right property, the content doesn't seem to scroll when searching. (Chrome/Mac OSX)
However, a user would still see there was a match and be stumped as to where it could be.
$("#sliderbuttonnext").click(function () {
$("#slider").animate({
marginLeft: "-=100px"
});
});
$("#sliderbuttonprev").click(function () {
$("#slider").animate({
marginLeft: "+=100px"
});
});
i came up with a solution that uses a variable to track the position of the main wrapping div and hides ".hide()" the content div that's not visible. hidden content is not visible to ctrl f.
HTML:
<div style="width:100px; height:150px;">
<div style="width:100px; height:100px; overflow:hidden;">
<div id="slider" style="width:200px; height:100px; right:0; position:relative;">
<div style="width:100px; height:100px; float:left;">
<div id="id1">visible</div>
</div>
<div style="width:100px; height:100px; float:left;">
<div id="id2">hidden</div>
</div>
</div>
</div>
<input id="sliderbuttonprev" type="button" style="float:left;" value="Prev">
<input id="sliderbuttonnext" type="button" style="float:right;" value="Next">
JQuery
<script>
var pos = 0;
function showfunct(x){
if(x==0)$("#id1").show();
if(x==100)$("#id2").show();
}
function hidefunct(x){
if(!(x==0))$("#id1").hide();
if(!(x==100))$("#id2").hide();
}
showfunct(pos);
hidefunct(pos);
$(document).ready(function() {
$("#sliderbuttonnext").click(function(){
pos+=100;
showfunct(pos);
$("#slider").animate({right:"+=100px"});
$("#slider").promise().done(function(){
hidefunct(pos);
});
});
$("#sliderbuttonprev").click(function(){
pos-=100;
showfunct(pos);
$("#slider").animate({right:"-=100px"});
$("#slider").promise().done(function(){
hidefunct(pos);
});
});
});
</script>
I'm trying to display two images side to side, with text, controls and whatever else my heart desires over them.
To do this, I have the following:
<div>
<div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent">
<div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is text</div>
<div style="position:relative; left:61px; top:100px; width: 319px; z-index:1">This is also text</div>
<img id="leftImg" alt="Images/redbox.png"
style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;"
src="Images/redbox.png" />
</div>
<div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent">
<img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
</div>
</div>
This is all great except for one little thing... The left div, the "redbox.png" is always scooted down by the number of s I want inside it (or any place taken by the elements).
I could place the elements after the image, but it's really easier to place them where I want this way, and to keep them in place when I animate the boxes.
Now, why am I using images instead of background-img? Well I want the images to resize to the surrounding <div>s automatically, and this is the only way I found of doing it easily (resizing manually with javascript is an option, but a complicated one at that, since the boxes will be animated).
Any ideas? Thanks!
You should use position:absolute rather than position:relative in order to take the element out of flow. You will need to adjust the left and top attributes, however.
http://jsfiddle.net/3fJcR/1/
<div>
<div id="leftDiv" style="float:left; width:49%; height:400px; background-color:transparent; position: relative">
<div style="position:absolute; left:61px; top:50px; width: 319px; z-index:1">This is text</div>
<div style="position:absolute; left:61px; top:64px; width: 319px; z-index:1">This is also text</div>
<img id="leftImg" alt="Images/redbox.png"
style="width:100%; height:100%; z-index:-1; right: 1124px; top: 9px;"
src="Images/redbox.png" />
</div>
<div id="rightDiv" style="float:left; width:49%; height:400px; background-color:transparent; position: relative">
<img id="rightImg" src="Images/bluebox.png" alt="Images/bluebox.png" style="width:100%;height:100%; z-index:-1;" />
</div>
</div>
You can have position:absolute for your wrapping div and position:absolute for inner overlay too. Then the inner absolute is relative to outer absolute positioned element not the body.
Look at this example to see what I'm saying:
http://jsfiddle.net/mohsen/TbkjK/7/
For writing text over image you put image in background style and alt text like this-
<img scr="" alt="text"/>
<style>
.img{background-image:url('IMAGE_URL'); }
</style>