I have spent the last two days looking for a simple javascript or jquery code for this. I want to incorporate a horizontal scrolling div using javascript or jquery to display images and descriptive text for the work page of my web portfolio.
It would function very similar to the glide-onclick scrolling shown here: http://www.dyn-web.com/code/scroll/demos.php#horiz Unfortunately that code license is $40, and I am a broke student.
On loading of the page, three portfolio images will be shown. Extras are hidden in the overflow to the right. Onclick of a left arrow (I can create), a new image slide comes into view from the right. A right arrow click sends it back into overflow. I don't want scrollbars, just arrows controlling the slides.
Any help is much appreciated. Thanks.
You can just use code like this:
function FixMargin(left) {
$(this).css("left", left);
}
$(document).ready(function () {
$('#rightbutton').click(function () {
var left = parseInt($("#bitToSlide").css('left'), 10);
$("#bitToSlide").animate({ left: left - pageWidth }, 400, FixMargin(left - pageWidth));
});
$('#leftbutton').click(function () {
var left = parseInt($("#bitToSlide").css('left'), 10);
$("#bitToSlide").animate({ left: left + pageWidth }, 400, FixMargin(left + pageWidth));
});
}
where your html looks like this:
<div id="slideleft" class="slide">
<div class="inner" id="bitToSlide" style="width:1842px">
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td id="page1" style="width: 614px">
</td>
<td id="page2" style="width: 614px">
</td>
</tr>
</table>
</div>
</div>
and your css looks like this:
.slide
{
position:relative;
overflow:hidden;
height:365px;
width:597px;
margin:1em 0;
background-color:#E9ECEF;
border:0px
}
.slide .inner
{
position:absolute;
left:0;
bottom:0;
height:365px;
padding:0px;
background-color:#E9ECEF;
color:#333
}
I wrote the above a really long time ago - so you probably want to update it a bit (replace the table's with div's for example) but it works.
You obviously need the two buttons on there as well
There are a lot of jQuery plugins which allow you to do this very easily.
For ex: http://slidesjs.com/
Hope this helps.
You can do something like this. Not tested code but just giving you a hint.
<div id="imageContainer">
<div id="imageWrapper">
<img />
<img />
</div>
<span id="left">Left</span>
<span id="right">right</span>
</div>
var imageWidth = 200;
$("#left").click(function(){
$("#imageWrapper").animate({marginLeft:"-="+imageWidth}, 500);
//Offcourse you need to handle the corner cases when there is not image to move left
});
$("#right").click(function(){
$("#imageWrapper").animate({marginLeft:"+="+imageWidth}, 500);
});
You can have a look to iscroll 4.
http://cubiq.org/iscroll-4
You have a scrollTo method or scrollToElement method...
Related
I am trying to work out how to make a custom lightbox type thing (I'm making an image gallery / video player which will sit inside a template) for my website but can't seem to work out. How I can make a whole div clickable.
I've tried using an anchor wrapped around the div but that still won't make the div display.
A live version of the page / website which contains the full html can be found here -
http://mosesmartin.co.uk/digitalguys/ford.php#
the HTML -
<a onclick="showdiv('imagepopup');" href="#">
<div class="rectanglewrap">
<div class="rectangleimg" id="fordengine">
<div class="rectangleimginfo">
<h3 class="imageinfo">Story in Pictures</h3>
</div>
</div>
</div>
</a>
CSS
#imagepopup {
visibility: hidden;
position:absolute;
height:100%;
width:100%;
background-color: black;
margin-right:0px;
}
And the Jquery / Javascript
function showdiv(Div_id) {
if (false == $(Div_id).is(':visible')) {
$(Div_id).show(250);
}
else {
$(Div_id).hide(250);
}
}
I'm by no means a master at JavaScript so if there's a better way of doing this please let me know.
Thank you
You can make a div clickable in jquery with $("#myDiv").click(function() {dosomething();});
$(function() {
$(".rectanglewrap").click(function() {
$("#imagepopup").toggle(250);
});
});
Trying to make a specific id (#logo) disapear once I scroll in specific section id ("#performance-graphs"), the id that is hidden must show itself again once I have scrolled out that section.
Please see my code below, currently id does not work but the idea is there, not sure what I am doing wrong. basically I trying to make my main header smaller by removing the logo when it gets to the chart section.
JQUERY CODE
<script type="text/javascript">
$(document).ready(function() {
$('#performance-charts').scroll(function() {
var scroll = $('#performance-charts').scrollTop();
if (scroll > 10) {
$('#logo').css("display", "hidden").fadeOut(250);
}
else {
$('#logo').css("display", "block").fadeIn(250);
}
});
});
</script>
HTML SNIPPET BODY
<section id="performance-graphs">
<a id="performance-graphs"></a>
<div class="double-space"></div>
<div class="centered-wrapper">
<h1 class="section-title">charting performance</h1>
...............................................................
</div>
</section>
HTML SNIPPET HEADER
<span itemscope itemtype="http://schema.org/LocalBusiness"><header id="fixed" class="solid-header">
<div class="centered-wrapper">
<div itemscope itemtype="http://schema.org/Service"><div itemprop="ServiceType" content="Asset and Fund Management"></div></div>
<div id="logo"><img src="../images/value_images/VPM_global3a.png" alt="White Fleet Globel Select Opportunities">
<p>LU0721514452:USD - Managed by Value Portfolio Managers (Pty) Ltd</p></div>
<br>
<a class="nav-btn"><i class="fa fa-bars"></i><span>Menu</span></a>BaB
Your help would be greatly appreciated.
Ok here you go. I used your fiddle and updatet it HERE
Basically you have bad code there, because an id should be unique! (i just added another charakter to one of the duplicated IDs.
I just updated your JS Code like this:
if ($(document).scrollTop() > $('section#performance-graphss').offset().top) {
Because you need the offset().top of your graph container and compare it to the scroll position of the qhole document.
EDIT:
Does this FIDDLE help?
I just added another check for hiding the element:
$('section#performance-graphss').offset().top + $('section#performance-graphss').height() > $(document).scrollTop()
So when you scroll past the container the logo gets display: blick; again.
Watch out for the CSS i added: The containers need a height.
#performance-graphss {
width: 100%;
height: 700px;
display: block;
}
+++++i add mention+++++
thanks guys for your answers,
but, i think, i missed something to write more.
when i click the button to show the div(#pop), it works right at the scroll on the top.
but, when i go down the scroll, the div(#pop) goes up in the window(height:0) not in "bottom:10%" like at the scroll on the top.
so, i'm trying your answers now, but, i'm not succeed yet T_T HELP!! :)
=================================================================================
Here are my codes.
I have a floating menu and one button of them works for showing a div id = pop, which is floating too.
I want to hide the div #pop when window starts, and when the button's clicked, it shows.
So I added codes display:none to hide, but when i click the button to show the div #pop, the div #pop is anywhere, not in bottom: 10% in CSS.
HTML
<div class="menu">
<img src="btnUp.png"><br/>
<img src="btnMe.png" id="pop_bt"><br/>
<a href="#scrollbottom">
<img src="btnDown.png">
</a>
</div>
<div id="pop">
<div>
POP UP
</div>
</div>
CSS
#pop{
display: none;
width: 300px;
height: 400px;
background: #3d3d3d;
color: #fff;
position: absolute;
bottom :10%;
left: 30%;
z-index: 3;
}
Javascript
$(document).ready(function(){
var boxtop = $('.menu').offset().top;
$(window).scroll(function(){
$('.menu').stop();
$('.menu').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
$(document).ready(function() {
$('#pop_bt').click(function() {
$('#pop').show();
});
$('#pop').click(function() {
$('#pop').hide();
});
});
$(document).ready(function(){
var boxtop = $('#pop').offset().top;
alert(boxtop);
$(window).scroll(function(){
$('#pop').stop();
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
Actually, I'm not a programmer, just a designer, so I'm very fool of HTML/CSS/Javascript.
Can anyone help me?
Display none is removing your button from the layout.
Same on .hide().
Use opacity 0 to hide the dig but keep it in your browser.
In the absence of a fiddle, I can do some guess work only. Looks like the line below is the problem:
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
It sets a top value and moves the layer to some other place. It should work fine if you remove that.
use this...
$(document).ready(function()
{
$("#pop").hide();
$("#button_id").click(function()
{
$("#pop").show();
});
});
is this you actually need?
I'm trying to clone #main then put my ajax result there (hidden), after doing so I will make it scroll horizontally to the left hiding the current one then display the clone.
HTML:
<div class="container">
<div id="main">
<p>Click here to start</p>
</div>
</div>
CSS:
#main{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
}
.container {
position:relative;
}
Javascript:
$('#main').click(function(){
//clone.html(data)
var clone = $(this).clone().html('<p>Ajax loaded content</p>').css(
{position:'absolute',right:'0','margin-right':'-460px',top:0}
).attr('class','love').insertAfter($(this));
$(this).css({position:'relative'});
var width = $(window).width()-$(this).outerWidth()/2;
$('#main').animate({'left':'-'+width},4000);
});
but i'm stuck on the idea on how to make both #main animate to the left and position the second div at the center?
Fiddle
EDIT: Now i'm only stuck on how to animate the clone.
I sort of took a different approach to your question, is this kind of what you are looking for?
http://jsfiddle.net/3s7Fw/5/show
I thought, rather than do some animating ourselves, why not let jQuery's hide function do it for us? This could definitely be made to work better, but it communicates the thought.
JavaScript
$('.container').on('click', '.loaded-content', function(){
$this = $(this);
//clone.html(data)
var clone = $this.clone().html('<p>Ajax loaded content</p>').attr("id", '');
$this.after(clone);
$this.hide('slow');
});
HTML
<div class="container">
<div id="main" class="loaded-content">
<p>Click here to start</p>
</div>
</div>
CSS
#main, .loaded-content{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
float: left;
}
.container {
position:relative;
width: 920px;
}
If this is not the desired functionality, then you might be interested in a slider. There are a number of good slider plugins already out there that you can use. The difficult part would probably be adding a addNewSlide function to your chosen slider, assuming it didn't already have one.
I have a need to display a lot of image thumnails in a small space.
My idea is to have 3 columns of thumbnails with an undetermined amount of rows. I planned to put this content in a and then put that inside a viewport div. Like so:
<div id="viewport" style="width: 300px; height: 300px; overflow: hidden;">
<div id="content" style="width: 300px; height: 100000px;">
Rows of thumbnails go here
</div>
</div>
Previous
Next
Autotrader's image control is exactly what I am going for if an example helps illustrate my point.
I think what I need to do is change the topMargin of 'content' over a period of time with javascript for a scroll effect when one of the buttons is clicked.
I don't mess with javascript much and I'm not sure where to start. Can someone point me in the right direction?
So I finally took 30 seconds out of my day and learned what jQuery is and how to use it.
=0
This is a simple example doing the movement I was looking for.
You have to download jQuery to make it work. http://jquery.com/
I'll leave the question up in case anyone else needs something like this.
<script src="../jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#next").toggle(function() {
$("#content").animate({ marginLeft: '0px'}, 'slow');
}, function() {
$("#content").animate({ marginLeft: '-100px' }, 'slow');
});
});
</script>
<div id="viewport" style="width: 300px; height: 300px; overflow: hidden;">
<div id="content" style="width: 300px; height: 100000px;">
Rows of thumbnails go here
</div>
</div>
<a id="next" href="">Previous</a>
<a id="prev" href="">Next</a>
If there is a better way, let me know....