I am presenting an image embedded in a descriptive text item, followed by several questions about that image. I would like that item to remain in place while the participant scrolls.
I've been able to get the entire image to remain in place using something like this HTML code:
<html>
<style>
.image{position: fixed; background: white;}
</style>
<div class = "image">
<img src="LOCATION OF IMAGE FILE" style="width: 395px; height: 395px;" />
</div>
</html>
But this freezes the image itself in a very awkward place (it actually does this in the editor itself, which blocks me from doing anything else). Is there a way to keep the presentation of the item exactly the same as it is normally, but just keep it in place?
Edit:
This is how it should appear, as a separate item from the questions to follow. I would then like it to remain frozen in place while the user can scroll through the questions.
This shows how it currently appears. The image is frozen in place, but not where it should appear (i.e., above and separated from the questions that follow.
You can use a spacer element to align the starting height of other elements. For example:
<div class = "image">
<img src="LOCATION OF IMAGE FILE" width="395px" height="395px"/>
</div>
<div class = "image_spacer">
This is a spacer element
</div>
<style>
.image{
position: fixed;
background: white;
z-index: 1000;
}
.image_spacer{
height: 395px;
visibility: hidden;
}
</style>
Visually speaking, I may recommend adding a width of 100% to your image div as well, so that other elements are fully covered when you scroll.
To fix at the top on scroll, do the following:
<div class = "image">
<img src="IMAGE LOCATION HERE" width="395px" height="395px"/>
</div>
<div class = "image_spacer">
This is a spacer element
</div>
<style>
.image{
background: white;
width:100%;
z-index: 1000;
text-align:center;
}
.image.fixed{
position: fixed;
top:0;
left:0;
}
.image_spacer{
height: 395px;
visibility: hidden;
display:none;
}
.image_spacer.fixed{
display:block;
}
</style>
In addition, add this to the JavaScript for the question:
Qualtrics.SurveyEngine.addOnload(function()
{
var space = $$('.image')[0].cumulativeOffset().top;
console.log(space);
window.addEventListener("scroll", function(){
if( document.body.scrollTop > space){
$$('.image')[0].addClassName('fixed');
$$('.image_spacer')[0].addClassName('fixed');
}
else{
$$('.image')[0].removeClassName('fixed');
$$('.image_spacer')[0].removeClassName('fixed');
}
});
});
Did you try using the Text/Graphic option?
As I am seeing no problem if I add an image that way, and the survey questions are in their place, check the image below for reference.
Related
I have a scroll-bar in a div element and initially it's position is top. Whenever i add some text to the div element then the scroll-bar does not move. Is there any way, the scroll-bar of the div element's position will be always bottom and whenever I add some text to the div element, the scroll-bar also goes to the bottom automatically?
Here's my div element:
<div class='panel-Body scroll' id='messageBody'></div>
And CSS class
.scroll {
height: 450px;
overflow: scroll;
}
What i need is, initially the position of the scroll-bar should be bottom.
Also when i clicked a send message, I'm adding the message to the div elements 'messageBody'. On that time the the scroll-bar should be down again.
This is the current style of my scroll-bar
And I want it to be always
Thanks in advance.
var messageBody = document.querySelector('#messageBody');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
Something like this should do what you want if I understood what you want correctly.
Replace messageBody in getElementById() with your chat message container id.
var chatHistory = document.getElementById("messageBody");
chatHistory.scrollTop = chatHistory.scrollHeight;
This will scroll the message container to the bottom.
Since scroll position is recorded in pixel and not percentage, the scroll position doesn't change as you add more elements into the container by default.
Do this after you have appended a new message into your chat message container.
Assume your html code like this.
HTML
<div id="parentDiv">
<div class="people">1</div>
<div class="people">2</div>
<div class="people">3</div>
<div class="people">4</div>
<div class="people">5</div>
<div class="people">6</div>
<div class="people">7</div>
<div class="people">8</div>
<div class="people">9</div>
</div>
And then wrap your js like this
JS
var objDiv = document.getElementById("parentDiv");
objDiv.scrollTop = objDiv.scrollHeight;
DEMO
Here you go. Follow this concept.
$('#messages').scrollTop($('#messages')[0].scrollHeight);
#chatbox-history {
overflow: none;
position: relative;
width: 100%;
height: 200px;
border: 1px solid #ccc;
}
#messages {
overflow: auto;
position: absolute;
bottom: 0;
width: 100%;
max-height: 200px;
}
#messages div {
border: 1px solid #e2e4e3;
margin: 5px;
padding: 10px;
background: #fafafa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatbox-history">
<div id="messages">
<div>asdjf ;asd</div>
<div>ajsd fa ;skd f;s</div>
<div>asdjf ;akjs d;lf a;lksd fj</div>
<div>ajsd fkaj s;dlf a;ljsdl;fkja;lsd f; asd</div>
<div>Wassup?</div>
</div>
</div>
That'd be :: messageBody.lastChild.scrollIntoView(); //for the initial scroll to bottom position.
p.s.: After the page load, this command should be called by your message handler on message update.
It's already 2023 and you can simply use Element.scrollIntoView() now! Check MDN documentation.
var messageBody = document.querySelector('#messageBody');
messageBody.scrollIntoView();
So I've started playing around with bigvideo.js (which is built on top of video.js) and it works fine for the basic usage of having a fixed background video over the whole screen. I have also managed to show it inside of a div.
My problem though, is that I can't seem to stack other DIVs with other content over or under the bigvideo.js container div, and I can't seem to figure out how to solve this.
My HTML:
<div style="float: left; width: 100%; height: 300px;">
<h1>hi there</h1>
</div>
<div style="float: left; width: 100%; height: 500px;" id="intro-video-container">
</div>
JS firing up bigvideo:
$(function() {
var BV = new $.BigVideo({container: $('#intro-video-container'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
So the video container div ALWAYS gets stuck up to the left top of the body, no matter if I try to force it down with margin-top, or place divs before it, etc.
Any ideas?
Update, here is an illustration of what I kind of what to achieve:
Try to use container div (so called wrapping) in your page where you will place the desired content (as on the plugin's example page):
CSS
.box {
background:#444; background:rgba(0,0,0,.6);
padding:20px;
border-radius:5px;
margin-bottom:20px;
}
.main {
position:relative;
margin:50px 50px 440px 220px;
min-width:300px;
-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}
.dimmed {
color: #ccc;
}
#big-video-wrap {
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
HTML
<div id="big-video-wrap"></div>
<div class="main">
<div id="overview" class="box">
<h1>BigVideo<span class="dimmed"><small>.</small>js</span></h1>
<h2>Simple Ambient Video Example</h2>
</div>
</div>
JavaScript
$(function() {
var BV = new $.BigVideo({container: $('#big-video-wrap'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
EDIT:
Now, it is more clear what you are trying to achieve, the simplest solution is to include an iframe on place of the div, which points to your full-screen video page.
I.e. create page video.html with all initializations and plug-in includes, then use it as source of your iframe on main page. Your iframe can be styled to match the desired dimensions (for example 100% width and 300px height).
Hi there I need to an interactive element using a large image. This image sized 1000x1000 pixel with simple imagery will contain several questions with yes or no. What I want to do is place this image within a small div (say 500x300) with hidden overflow and add hotspots on the image for the yes/no option. What I want is when the user clicks yes, then the hotspot link pans to specific x/y coordinates of the same large image. Viewer will only see within the 500x300 window. So on and so forth. Is this possible? It seems so simple yet only option I can find is the pan by mouse option or iframe option with complicated divs and anchors. I'm not an expert in java/jquery but would love to find a script that is adaptable. Please help!
This sounded fun so I made a custom solution real quick. Demo here: jsBin
It's heavily reliant on the proper CSS, so check that in the bin, but here's the JS part:
var choice = document.querySelectorAll('.choice'),
image = document.getElementById('image')
for ( var i=0; i<choice.length; i++) {
choice[i].addEventListener('click', function (event) {
var x = this.dataset['x'],
y = this.dataset['y'];
image.style.top = '-'+y+'px';
image.style.left = '-'+x+'px';
})
}
Use css transitions for animation. Set up the positions you want the buttons to move the image around to in the image using a series of javascript objects. Then, set up your anchors, text, etc using absolute positioning on top of the image inside of a div container. Finally, add a click action in jQuery to assign your different positions to the top and left css of that container.
The end result, then, will be that you click an anchor, the left and top positions are assigned to the container via css in jQuery, and the transitions will slide the image around with the anchors.
I set up a fiddle here.
Here's the html from the fiddle:
<div id="window">
<div id="container">
<img src="http://upload.wikimedia.org/wikipedia/en/1/1f/Kill_The_Lights_1000x1000.jpg" id="image">
<ul>
<li><a id="city" href="#">City</a></li>
<li><a id="bottom" href="#">Bottom</a></li>
</ul>
</div>
</div>
And the CSS:
#window {
width:500px;
height:300px;
overflow:hidden;
position:relative;
}
#window a {
position: absolute;
z-index: 2;
display: block;
padding: 10px;
background: rgba(255,255,255,.5);
}
#city {
top: 20px;
left: 20px;
}
#bottom {
top: 220px;
left: 220px;
}
#container {
-webkit-transition:left 2s, top 2s, -webkit-transform 2s;
transition:left 2s, top 2s, transform 2s;
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
}
Here's some javascript to give an example of setting up the positions as objects.
var city = {
top: -200,
left: -200
};
var bottom = {
top: -700,
left: -100
}
$('a').click(function() {
var t = this.id;
var c = $('#container');
if (typeof eval(t) !== 'undefined') {
c.css({
'top': eval(t).top,
'left': eval(t).left
});
}
});
I've just made a Fiddle with a demo image from where you could proceed.
HTML:
<div class="imgHolder">
<div class="hotspot one">Click</div>
<img src="image.jpg" />
</div>
CSS:
.imgHolder {
overflow:hidden;
width:300px;
height:300px;
position:relative;
}
.hotspot.one {
position:absolute;
top:10px;
padding:2px;
background-color:#fff;
left:10px;
}
.hotspot:hover {
cursor:pointer;
}
img {
position:relative;
z-index:-1;
}
jQuery:
$(".hotspot").on("click", function () {
$("img").animate({
"right": "+=100px"
});
});
For reference: http://api.jquery.com/animate/
You could e.g. fade hotspots in and out on specific positions and use animate() to move to the next hotspot.
I have two img elements and I want the first image.png to go behind the transparent image.png. I have tried a lot of different things (z-index, transparent background color, rgba background color, positioning absolute and relative, nesting one in a div, making them both divs). Right now i've been trying to use a transparent .png image. The image .png is actually behind it, but it still shows through it. Please help.
html:
<body>
<main class="site-wrapper">
<div class="carnival"></div>
<div id="images">
<img id="divbox" src="images/divbox.png">
<img id="clown1" src="images/clown1.png">
</div>
</main>
</body>
js: (i did the styles in js b/c I was interested in learning how to do it that way):
//styles
//divbox:
document.getElementById('divbox').style.display = "inline-block";
document.getElementById('divbox').style.transform = "skew(-2deg)";
document.getElementById('divbox').style.marginTop = "21%";
document.getElementById('divbox').style.marginLeft = "47.6%";
document.getElementById('divbox').style.height = "200px";
document.getElementById('divbox').style.width = "200px";
document.getElementById('divbox').style.border = "1px solid orange";
document.getElementById('divbox').style.position = "absolute";
document.getElementById('divbox').style.zIndex = "2";
//clown1:
document.getElementById('clown1').style.display = "inline-block";
document.getElementById('clown1').style.transform = "rotate(90deg)";
document.getElementById('clown1').style.marginTop = "21%";
document.getElementById('clown1').style.marginLeft = "53%";
document.getElementById('clown1').style.border = "1px solid green";
document.getElementById('clown1').style.position = "relative";
document.getElementById('clown1').style.zIndex = "1";
Thanks for any help, please let me know if I can answer questions.
UPDATE:
Sorry for not being clearer. I have now achieved getting the image behind the other image, but since the image ontop is transparent, the image behind is showing. How do I stop this?
Here is an example of what is happening:
http://oi61.tinypic.com/2mw9egx.jpg
Notice the orange border is ontop so it is definitely ontop.
UPDATE 2:
This should make it really clear what I want. Again sorry for the confusion:
http://oi59.tinypic.com/eamb0n.jpg
I would do something like the following jsFiddle: http://jsfiddle.net/7gdx48fu/. Might need to reload a couple times to see a good example of the overlay working.
Create a wrapper DIV for your two images. Set that wrapper DIV's to position: relative so we can use absolute positioning on one of the images it contains. By doing this we prevent the absolute positioned image from potentially aligning itself elsewhere in the page, like the upper left corner of the browser window.
Then, set the position of our overlay image, the transparent PNG, to position: absolute along with top: 0 and left: 0 to align it with the first images upper left corner.
You can do this without using z-index if you watch the order you include your images. Place the image you want behind the transparent PNG in the markup first followed by the transparent PNG.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<img class="overlay" src="http://lorempixel.com/200/200/city">
</div>
.img-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0.25; /* using this to replicate the transparent PNG */
}
EDIT
The OP's requirements have changed to include how to prevent an image behind a transparent image from showing through the transparent image.
Here is an updated jsFiddle: http://jsfiddle.net/7gdx48fu/2/.
This approach I wrapped the transparent PNG in a wrapper DIV and set it's background color. I used white in my example but you may use any color.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<div class="overlay">
<img src="http://lorempixel.com/200/200/city">
</div>
</div>
.img-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background-color: white;
top: 15px; /* shifting overlay for illustrative purposes - not use case code */
left: 15px; /* shifting overlay for illustrative purposes - not use case code */
}
.overlay img {
opacity: 0.25; /* using this to replicate the transparent PNG */
}
Not perfect but I'm unsure of how else to proceed.
EDIT 2
It seems the OP wants to do a form of masking. You can do this with overflow: hidden.
I have updated the jsFiddle: http://jsfiddle.net/7gdx48fu/4/
In this updated answer I have kept the wrapper DIV and set it with a fixed width and height. Then applied overflow: hidden. What we are doing here is creating an invisible window that will only show content when it is within the dimensions of the window.
To have the image appear as if it is coming out of the base layer image simply adjust the position of the image inside the wrapper DIV. For the jsFiddle simply play with the value of top in .mask img.
This will need a little tweaking for the proper placement and size of the .mask DIV to fit your needs but hopefully points you in the right direction.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<div class="mask">
<img src="http://lorempixel.com/200/50/city">
</div>
</div>
.img-container {
position: relative;
}
.mask {
position: absolute;
top: 25px;
left: 25px;
height: 100px;
width: 100px;
overflow: hidden;
border: 1px solid red; /* for illustrative purposes */
}
.mask img {
position: relative;
top: 25px;
}
Have you tried the css opacity property ?
#clown1{ opacity:0.3;}
make both images' position absolute instead of relative
for the above to work, some common ancestor (i.e. #images) must have a non-default position too (e.g. relative)
forget zIndex - all else being equal, the latter element will be "topmost"
put all the above in a CSS style sheet instead of in JS code!
Forgetting the other transformations and margins, etc, the core CSS that you need is:
#images {
position: relative;
}
#divbox, #clown1 {
position: absolute;
}
Put them both in a parent container. Make the parent have position: relative and put both images having position:absolute. That way they will stack.(Something like that that I didn't check The order of img's could be wrong - play around a bit.
CSS:
.parent > img.transparent {
position: absolute;
}
.parent > img {
position: absolute; opacity: 0.5
}
HTML:
<div class="parent" style="position:relative">
<img src="other.png" class="transparent"/>
<img src="transparent.gif"/>
</div>
Some more explanation: When you make a parent/ancestor element's position relative it means that its contents that are absolute will be relative to the parent and not to the whole window
I have a strange problem though, when i click the content with z-index 20, the thing with z-index 1 gets selected in my phone.
The image has both the screen shot - the part on the right side of the image is only for illustrating my problem, as such the white gray div is behind my content div.
Can someone please rescue.
Related CSS files:
#content {
background: #000000;
background: url(../img/WireFrame_test.png) center center no-repeat;
box-shadow: 0 0 15px 15px #222222;
overflow-x: hidden;
z-index: 20;
}
.snapjs-right .snap-drawer-right {
display: block;
z-index: 10;
}
.snapjs-right .snap-drawer-left {
display: block;
right: 0;
left: auto;
z-index: 1;
}
As requested related HTML scripts:
<body>
<div class="snap-drawers" id="leftid">
...
<div class="snap-drawer snap-drawer-right overthrow">
<div>
<h3>Questions</h3>
<div class="demo-social">
</div>
<h4>Java</h4>
<ul>
<li>What is Java?</li>
<li>Uses of Inheritence?</li>
...
</div>
</div>
<div id="content" class="snap-content">
my content goes here
</div>
</div>
</body>
Surely because "Uses of inheritance" is the only link element (other than "What is java"), it will be selected - there's nothing else to select!
Try setting the display of that element to "none" when it is hidden.
You could try to hook into the event when clicking / dragging on the content panel and do an event.stopPropagation(); or an event.preventDefault(); when the panel is closed.
As far as i know, you can see that coz Snap.js add's corresponding classes like (class="snapjs-right" or class="snapjs-left") to the body in order to indicate if a panel is open or not.
So first you've got to check that.
With jQuery it would look something like this:
$(document).ready(function() {
$("#UsesofInheritence_Anchor_ID").bind("click", function() {
if (!($('body').hasClass("snapjs-right"))){
event.stopPropagation();
event.preventDefault();
}
});
});