I have used a plugin to have two images with a slider ontop to show the new and old... Please see link:- http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/index.html
I am however struggling to fit the play button completely central to the white bar that moves, this is the code I am using for it:-
.js-slider-last-container:after {
background-color: #fff;
content: url(../play.png);
height: 100%;
position: absolute;
width: 5px;
z-index: 1;
}
Has anyone got any ideas?
Thanks!
Scott
Currently your css may not solve your issue. But I have an idea. You need to create image element on ".js-slider-container" div element as like before/after button. Now you need to dynamically move that image as ".js-slider-last-container" width value is change.
I will show algorithm
HTML
<div class="wrap">
<div class="js-slider-container">
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/play.png" id="arrow" />
<div class="before">Before</div>
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/before.jpg" class="js-slider-first">
<div class="js-slider-last-container">
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/after.jpg" class="js-slider-last">
</div>
<div class="after">After</div>
</div>
</div>
In html I have added only image
JS
container.mousemove( function(e) {
let widthVal=container.width() - (e.pageX - container.offset().left)
$( lastImgContainer ).css({
"width" :widthVal // container's width - mouse's position from left in the container
});
$('#arrow').css({"right":widthVal});
});
In JS I have changes tiny stuff. Currenlty i have adjust arrow image but you may need to remove that arrow image from css stuff with ::after css code + you may need to make buch animation on that arrow image too.
Related
Using Draw2d and the menu selection code from the demo but I don't get the expected result...
In the demo, the menu appears on the right side of the clicked element. In my version the menu appears way off to the top.
This seems to be caused by the fact that I have some HTML directly above the canvas (header, etc...). On the contrary if the canvas is at the very top of the page it works well.
Found a way to fix this.
It's all about where you append the menu's HTML and relative positionning
In the demo there isn't any HTML above the canvas (on the website it's an iframe so what you see above is not really there from the canvas perspective) so it works.
The demo is misleading because in the code they add the HTML menu in the body tag. They can do that simply because their page is composed of only two elements : the body and the canvas.
In my case and probably yours too, doing this results in adding the HTML menu far far far far away from the canvas itself resulting in a position that is wayoff !
What they do is :
$("body").append(this.overlay);
What you should do is append the HTML menu (this.overlay) as a sibling of the canvas. Do NOT add it in the canvas itself. If you do, you won't catch click events anymore.
Your HTML should look like this :
<div id="some-parent">
<div id="gfx_holder">THE CANVAS</div>
</div>
And the code updated to
$("#some-parent").append(this.overlay);
But it's not finished yet. As the menu is added using position: absolute you'll need your parent containers set to position: relative so the the child's absolute position would become relative to the parent and not web page. It's CSS... You know...
Also, the parent should be the exact same size as the child canvas !
So the HTML should evolve to this :
<div id="some-parent" style="position: relative; height: 800px">
<div id="gfx_holder" style="height: 800px">THE CANVAS</div>
</div>
And when the menu's HTML is added it should look like that at runtime :
<div id="some-parent" style="position: relative; height: 800px">
<div id="gfx_holder" style="height: 800px">THE CANVAS</div>
<div class="overlayMenu" style="top: 230px; left: 197.391px;">⊕</div>
</div>
See ? The overlayMenu has position: absolute which allows it to be rendered at a correct position...
hf
I've a personal project to learn more about HTML/CSS/JS.
But I got a problem with it.
I have two divs in my <body>, each one with 2 circular concentric div. One is placed on the center of the area, the other one not.
<div id="sphaea_bloc">
<div id="actor" class="actor_locked">
<div class="actor_extern_locked"> </div>
<div class="actor_intern_locked"> </div>
</div>
<div id="lock" class="lock_locked">
<div class="lock_extern_locked"> </div>
<div class="lock_intern_locked"> </div>
</div>
</div>
The base placement is good.
The second step is to add drag'n'drop with JQuery, and it works fine. The aim is to drop the little div into the bigger div.
When it fails, it correctly returns at a base position.
But now, when the drop is good, I want to place with JQuery the little div in to center of the bigger div (making 4 circles concentric).
I searched for a long time but I didn't manage to do it without the problem : I've always a little offset between my 2 divs... And I'm not able to understand why.
Here is the fiddlejs link :
FiddleJS link
Someone can help me to find the problem, and why my little div is always inside the bigger but with an offset ?
Thanks in advance !
AeldredOni
i have did like below, and its working, it will be centered even if you change with and height of divs:
.actor_locked {
position:absolute;
left:-9999px;
right:-9999px;
top:-9999px;
bottom:-9999px;
display: block;
margin: auto;
width: 60px;
height: 60px;
border-radius: 50px;
}
http://jsfiddle.net/xga3dzfm/1/
I am an amateur in Jquery but am so close to getting what I am looking for. I am trying to have a containing div animate to a larger height when an object is clicked. I am using the following code:
<div id="sliderone">
<div id="nav">
<div id="navone" style="text-align: center;">This is a clickable title</div>
</div>
<div id="ourteam">
<div id="title"></div>
</div>
</div>
<script type="text/javascript">
$('#navone').click(function(){
$('#title').html("<img src='http://placehold.it/350x550' alt='' />");
$('.post-8 .content-container').animate({height: '950'});
});
</script>
#navone {
padding:20px 20px;
cursor:pointer;
}
#title {
width:350px;
margin:0 auto;
}
#sliderone {
height:50px;
background-color:#777777;
position: absolute;
margin-top: -500px;
left: 50%;
margin-left: -175px;
}
#sliderone has to be absolutely positioned and so when I try to animate .post-8 .content-container it makes the top longer in comparison instead of making the bottom longer to contain the new content. Can I either animate the negative margin smaller or animate the bottom of the .post-8 .content-container?
Thank you for any help. I have worked hard on this and just can't quite figure out this last problem.
Here is the actual page to see.
http://s416809079.onlinehome.us/wp-login
login:stackoverflow
password:stackoverflow
You might want to try using some of jQuery's slideDown, slideUp or slideToggle methods. Since you are specifically looking to slide the container I imagine this might be more specific to your needs.
See this example based on what you have above: http://jsfiddle.net/82kHV/13/
Also links to jQuery methods:
http://api.jquery.com/category/effects/sliding/
You will set the element's height you want in your CSS. jQuery will interpolate and animated from 0 to this defined value in slideDown and the reverse in slideUp. slideToggle will take initial state of the element and do the opposite or toggle.
I guess you have this situation --> http://jsfiddle.net/z7M2Y/15/ . If that is the case you need to animate too the height for #sliderone:
$('#sliderone').animate({height: '225px'});/*The value you calculate*/
Check this demo http://jsfiddle.net/z7M2Y/26/
I am looking into adding a single page overlay when a user clicks the "Help" button in a web app I've created. Below is an example of what I want to achieve
I have jquery mobile implemented on my pages with javascript. I looked into the jquery mobile popup panels that overlay a page but it wouldn't serve my purposes.
What resources, libraries, language, etc would I go about doing this? I tried to google but the I get irrelevant results.
I haven't try it, but you can put the background in a div leaving it in behind the classic background (using low css z-index) with a fixed position (absolute position), a fixed width/height (100%/100%) and a trasparency.
When the user click the "Help" buttons you change the z-index putting it on the front of the page.
UPDATE
Assuming a html layout similar like this:
<html>
<head>...</head>
<body>
<div id="container">
<!-- some others divs with the content of the page and the help link -->
HELP
</div>
<div id="over_image"> <!-- add this -->
<img src="path_to_the_overlapping_image" alt="overlap image" />
</div>
</body>
</html>
A default CSS like this
div#container {
z-index: 100;
}
div#over_image {
z-index: -100; // by default the over image is "behind" the page
position: absolute;
top: 0px;
left: 0px;
width: 100%; // or puts the width/height of the "screen" in pixels
height: 100%;
}
div#over_image img {
width: 100%;
height: 100%;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
And at the end the jQuery function
$("a#help_button").on("click", function(event){
event.preventDefault(); // it's not really a link
$("div#over_image").css("z-index", "1000");
})
You should implement the "hide" function too, to "reset" the overlapping image on some action, maybe something like this:
$("div#over_image img").on("click", function(){
// when the user click on the overlap image, it disappears
$("div#over_image").css("z-index", "-100");
})
I haven't try it, maybe there are some more little things to change to make it works correctly, but it is a good begin.
SOME REFERENCES
Opacity / transparency: http://www.w3schools.com/css/css_image_transparency.asp
jQuery css: http://api.jquery.com/css/
I am new to CSS3 transitions. I am trying to make a image slideshow for webkit only. there are 3 images aligned next to each other inside a wide DIV. This wide DIV is inside a container DIV whoose overflow property has been set as hidden. the width of the container DIV is equal to each Image, hence user can see only one image at a time.
here is the HTML and CSS for that.
HTML
<div id = "imageHolder">
<div id="slide1_images">
<img src="./images/fish.jpg" />
<img src="./images/desert.jpg" />
<img src="./images/space.jpg" />
</div>
</div>
CSS
#imageHolder
{
width: 320px;
height: 240px;
border: 1px solid grey;
overflow: hidden;
position: relative;
}
#slide1_images
{
position:absolute;
left:0px;
width:960px;
-webkit-transition: -webkit-transform 0.5s;
}
Now I have added a CSS hover selector in the code just to test the transition. when user hovers over the image (the inner DIV, to be precise), the whole set moves to left by 320 pixels (which is the width of each image).
CSS for hover
#slide1_images:hover
{
-webkit-transform:translate(-320px,0);
}
Upto this the code works perfectly, when I hover mouse over the first image, the set moves left and the 2nd image fits perfectly in the outer DIV.
What I want is, to perform the same action on Javascript button click. I have added a button called btnNext in my page. How can I fire the translate from the button click event? I tried the below but it does not work.
Javascript
<script type = "text/javascript">
function btnNext_clicked()
{
document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
}
</script>
I am sure I have done something stupid! could you please help me out fixing the Javascript function? Thanks a lot in advance :)
With the obvious caveat its for webkit browsers only you just need to use
.style["-webkit-transform"] = ..
as - cannot be used in an inline propery name here: style.-webkit-transform
From JavaScript you can access -webkit-transform property in this way:
var style = document.getElementById("slide1_images").style;
style.webkitTransform ='translateX(-320px)';
You can make it cross-browser friendly by accessing following properties:
transform
webkitTransform
MozTransform
OTransform
msTransform