Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Is it possible to attach a div to an image? As in, to make the div follow the image? I have a web app where the user can click on a part of the page, and the image moves to it with easing. I'd like a speech bubble to follow the image and remain above it, but I'm having trouble finding out what this requires.
Any guidance is appreciated!
Regards
When I should do this, I would make a Div containing your image and the div of the speech bubble.
<div class="topelement">
<img src="#" />
<div class="speechbubble"></div>
</div>
Then when the user clicks on the certain part of the page, you can move the div with de class "topelement".
Hope this helps
If this is the element which user needs to clicks:
<div id="showImage">
Show the image
</div>
Once the user clicks that, the below slider will be shown
<div class="divSlider">
<img src="http://images6.fanpop.com/image/photos/33100000/justin-bieber-2013-justin-bieber-33194067-1295-1500.jpg" />
<div class="speechbubble">Your bubble message here!</div>
</div>
CSS:
.speechbubble {
background-image: url("http://www.clker.com/cliparts/K/k/N/x/a/k/dialog-bubble-rectangle-md.png");
width: 100px;
height: 100px;
background-size: contain;
background-repeat: no-repeat;
z-index: 100;
right: 0px;
position: absolute;
padding: 20px 30px;
color: red;
}
.divSlider {
width: 350px;
height: 300px;
position: relative;
display: none;
}
img {
float: left;
width: 300px;
}
By default am hiding the div in CSS itself.
now jQuery:
$(function() {
$("#showImage").click(function(){
$(".divSlider").fadeIn(2000);
});
});
Working Demo
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want to create a background with Google Maps' fucntionallity.
So here is the idea:
I haven't found any library but I guess it can be solved by css grid.
Can you help me with a piece of advice or just to say how theoretically it can be solved?
You could use jQuery draggable. What you can do is have a container div with the overflow set to hidden and have a draggable image (your background) inside:
$("#draggable img").draggable();
#div1 {
height: 400px;
width: 400px;
background-color: blue;
overflow: hidden;
}
.image {
margin-top: -400px;
margin-left: -400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
<span class="move" id="draggable">
<img src="https://placekitten.com/1600/1600" class="image"/>
</span>
</div>
If the snippet doesn't work here is the same code in jsfiddle.
I am trying to use jScrollPane to scroll through my gallery that is inside of an iframe. I am using the jQuery code for iframe scrolling from the official example.
Using this code doesn't work for my images (it just hides the original browser scrollbars, doesn't throw any errors and refuses to scroll), but it works perfectly if I replace my images with multiple paragraphs so they overflow (just like in the example).
EDIT: I forgot to mention that images scroll perfectly using the default browser scrollbar.
EDIT #2: Made a JSFiddle.
Here's how my gallery is structured:
...
</head>
<body>
<div id="content"> // Used the same way as in the example, works with text
<div class="gallery">
<div class='picture'>
<img class='pin' src='something'/>
<div class='wrapper'>
<img class='thumbnail' src='something'/>
<img class='border' src='something' />
</div>
</div>
<div class='picture'>
...
</div>
</div>
</div>
...
And here's the CSS for gallery and pictures:
.gallery {
position: relative;
width: 98%;
}
.picture {
float: left;
position: relative;
display: list-item;
list-style-type: none;
width: 11%;
}
.picture .pin {
position: absolute;
left: 48%;
width: 13%;
}
.picture .thumbnail {
position: absolute;
width: 89%;
margin-top: 19%;
}
.picture .border {
position: absolute;
width: 100%;
}
I ignored margins and some other irrelevant stuff, but you get the idea.
The jQuery code is exactly the same as presented in the example.
I think the problem is that images are loaded after scrollbar is initialized, and scrollbar does not detect container size changes by default. If you read documentation carefully, you can see next:
Demo showing how autoReinitialise can also be used so that content
with images in it displays correctly in jScrollPane
So, try autoReinitialise option. If it won't help - update your question with example of your iframe on jsFiddle.net
Solved it!
Apparently, the script didn't like the absolute position of my .picture .pin. Changing it to relative and restyling a bit solved my issue.
Updated JSFiddle
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I try to display DIV over the Google Map.
I know, there are many such questions on "stackoverflow", and many answers, but it didn't work in my example... :((((((((
My script:
<div class="b-map-content" id="map-content">
<div class="temp">
</div>
<div>
and styles:
.b-map-content{
position: relative;
width: 100%;
height: 550px;
}
.temp{
position: absolute;
top: 0;
right: 0;
height: 100px;
width: 100px;
background: #FF0000;
z-index: 9999;
}
When the page loading in some moment I see red square, but when map was loaded I don't see it again...
how it work You can see here: enter link description here
I will be very glad for help...
Try
<div class="map-container">
<div class="b-map-content" id="map-content"></div>
<div class="temp"></div>
</div>
When Google Maps initializes, I am guessing that it removes all inner elements within id="map-content", which is why you are seeing the flash of red.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I want to make a div, that pops up when the user hovers on a specific object with JS. I know all that. But my problem is, that the div is within the text and makes everything ugly when it pops up. I want it to float above the text. Is that possible with CSS? If not, is it possible with a plugin or a scripting language?
Please refer the example below:
<div class="container">
<div class="floating">Floating Div</div>
<div>
<p>Para Text Goes Here</p>
<p>More Text</p>
</div>
</div>
here is your CSS:
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position:relative;
}
.floating {
float: left;
position: absolute;
left: 0px;
top: 0px;
background-color: grey;
}
Things to do:
The use of POSITION:RELATIVE on container and POSITION:ABSOLUTE on floating div
please have a look at the working example : http://jsfiddle.net/tH84L/
Hope it works for you!
Hope this helps....
<body>
<div id="aFloat">float</div>
</body>
css:
body {
position: relative
}
#aFloat {
z-index: 1000;
position: absolute;
width: 200px;
height: 100px;
background-color: grey;
color: white;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am trying to make something similar to thesheepmarket.com in how they have a bunch of small images together, and when you scroll over one it pops out like that so you can see the image larger.
I would like to do this with CSS/JS.
Any help would be great.
So I can basically do everything, except I am not sure how to make the div popup a bit below:
#test {
height: 10px;
background: red;
width: 10px;
font-size: 1px; /* IE 6 */
}
#test:hover {
height: 100px;
width: 100px;
border-style: solid;
border-width: 1px;
}
$('#test').hover(function() {
console.log('hoved');
});
I am basically just looking for the best way to make the div popup below the one that it is currently hovering over.
consider using something like this plugin:
http://dropthebit.com/demos/photobox/
From the Plugin website:
HTML
<div id='gallery'>
<a href="http://www.somedomain.com/images/image1_large.jpg">
<img src="http://www.somedomain.com/images/image1_small.jpg" title="photo1 title">
</a>
<a href="http://www.somedomain.com/images/image2_large.jpg">
<img src="http://www.somedomain.com/images/image2_small.jpg" alt="photo2 title">
</a>
<a href="http://www.somedomain.com/images/image3_large.jpg">
<img src="http://www.somedomain.com/images/image3_small.jpg" title="photo3 title">
</a>
<a href="http://www.somedomain.com/images/image4_large.jpg">
<img src="http://www.somedomain.com/images/image4_small.jpg" alt="photo4 title" data-pb-captionLink='Google website[www.google.com]'>
</a>
<a href="http://www.youtube.com/embed/W3OQgh_h4U4" rel="video">
<img src="http://img.youtube.com/vi/W3OQgh_h4U4/0.jpg" title="PEOPLE ARE AWESOME 2013 FULL HD ">
</a>
</div>
JS
<script>
// applying photobox on a `gallery` element which has lots of thumbnails links. Passing options object as well:
//-----------------------------------------------
$('#gallery').photobox('a',{ time:0 });
// using a callback and a fancier selector
//----------------------------------------------
$('#gallery').photobox('li > a.family',{ time:0 }), callback);
function callback(){
console.log('image has been loaded');
}
// destroy the plugin on a certain gallery:
//-----------------------------------------------
$('#gallery').data('_photobox').destroy();
// re-initialize the photbox DOM (does what Document ready does)
//-----------------------------------------------
$('#gallery').photobox('prepareDOM');
</script>