i have three div's in an HTML page. the page look like this
HTML Page:
leftArrow(>) div rightArrow(<)
i need to move the div from left to right and right to left. using javascript and DHTMl
or JQuery.
Is it Possible to Move in that direction ?
Yes it's possible, i've done it in the past without using jQuery.
I have a the following markup:
<div id="HorThumbs" style="overflow:hidden;width:500px">
<div id="HorScroller" style="width:1000px">
//Data to be shown
</div>
</div>
var scrollStep=1;
var timerLeft,timerRight="";
function scrollDivLeft(id){
clearTimeout(timerRight);
document.getElementById(id).scrollLeft-=scrollStep;
timerRight=setTimeout("scrollDivLeft('"+id+"')",1);
}
function scrollRight(id){
clearTimeout(timerLeft);
document.getElementById(id).scrollLeft+=scrollStep;
timerLeft=setTimeout("scrollRight('"+id+"')",1);
}
Then add a MouseOver event to your left and right arrows, passing in 'HorThumbs' as the Id to either scrollDivLeft or scrollDivRight function.
Take a look at the jQuery cycle plugin. It will scroll left/right and allows prev/next buttons.
Related
Please take a look here at what I'm trying to achieve: http://jsfiddle.net/3m6r7ud2/4/
I have the following html page that looks like this:
<div class="page_conatiner" id="page1">
<img src=$file1>
<div class="page_conatiner" id="page2">
<img src=$file2>
<div class="page_conatiner" id="page3">
<img src=$file3>
And so on.
I also have a fixed button that shows up on hover:
<div class="rotate_button" id="rotate_left" ></div>
<div class="rotate_button" id="rotate_right" ></div>
This is the jQuery I'm using:
$(document).on("click", ".rotate_button", function(){
var direction = $(this).attr("id");
var page_num = ?
rotate_file(page_num,direction)
})
The buttons are in fixed locations on the page, and show on hover. When clicking on this button, I want to get which div was behind that div while clicking
so I could know which of the pages I need to rotate.
How can I do this?
First, I'm not certain what animation you are going for, but there might be a jQuery widget that will do what you want out of the box. Idk. The bootstrap one is handy, but maybe all of bootstrap is more than you want: http://getbootstrap.com/javascript/#carousel.
To answer your question: I would set a variable somewhere that keeps track of the current page num. Set it to 0 (or 1 if that's the first page number) when the page loads, and then in your click handler, increment it by 1. And then make sure to reset it to 0 (or 1) again when it gets high enough to start over. Does that answer your question?
I have been successful in getting Waypoints (http://imakewebthings.com/jquery-waypoints/) and a horizontal scroll (http://www.htmldrive.net/items/show/966/jQuery-Horizontal-automatic-Scrollbars-with-mouse) working on separate pages, but cannot combine them. I think it has something to do with the waypoints option parameters.
The waypoints function is:
$(function () {
$('#waypoint').waypoint(function () {
alert('You have scrolled to an entry.');
}, {
offset: '100px'
});
});
Its added to the page with:
<div id="horiz_container_outer">
<div id="horiz_container_inner">
<div id="horiz_container">
<div class="horiz_box1">Stuff</div>
<div class="horiz_box2">Stuff</div>
<div class="horiz_box1">Stuff2</div>
<div class="horiz_box2">Stuff2</div>
<div class="horiz_box1">Stuff3</div>
<div class="horiz_box2">Stuff3</div>
<div id="waypoint">Waypoint</div>
</div>
</div>
I put together a quick JS fiddle, but the horizontal slider was not working in that example for some reason. IF it helps: http://jsfiddle.net/bretwhiteley/w2p84Lmp/
In addition to the horizontal option, you need to set the context option since the scrollable element you're using isn't the window. From the docs:
The context defines which scrollable element the waypoint belongs to and acts within. The default, window, means the waypoint offset is calculated with relation to the whole viewport. You can set this to another element to use the waypoints within that element. It accepts a selector string, raw HTML element, or jQuery object.
Update: The 3.0 release brings is a new doc page for the context option and changes the rules slightly about what is allowed depending on which build you're using.
I have a large document with numbered anchor tags as shown below. And a textbox to punch the numbers in to go to anchor which uses window.location.hash
I am also using arrow keys to go next or previous anchors. I want to scroll to the anchor so to give some sense of direction.
<a name="1">
some text
<a name="2">
some text
<a name="3">
here is my function
function updatePageNumber()
{
var pagenumber;
pagenumber = document.getElementById('pageNumber').value;
window.location.hash = pagenumber;
}
Jumping to anchor is very ugly and people loose sense of direction in the text. So is there a way to scroll to anchor with JavaScript. I know there are lots of jQuery examples, but I don't know jQuery and couldn't find JavaScript.
Most important reason is I want to see my page number on the address bar!
Add jQuery library.
Use the following script to do a smooth scroll to the target element you want.
jQuery('html,body').animate({scrollTop: jQuery('#target').offset().top}, 1000);
target is the id of the target element and 1000 is the duration of the animation.
Use this code and enjoy
$(document).ready(function(){
$("#btop").hide(); // replace only #btop with your <div id=" ">
$(function(){
$(window).scroll(function(){
if ($(this).scrollTop()>100){
$('#btop').fadeIn(); // replace only #btop with your <div id=" ">
}
else{
$('#btop').fadeOut(); // replace only #btop with your <div id=" ">
}
});
$('#btop a').click(function(){ // replace only #btop with your <div id=" ">
$('body,html').animate({
scrollTop:0
},200); // to speed up scroll replace 200 to 300 or 500
return false;
});
});
});
There is no built-in smooth scrolling in JavaScript so you would have to implement it yourself -- but why re-invent the wheel if you already have it in jQuery and you probably won't have to add more than two or three lines of code? Just download jQuery and the ScrollTo plugin, add them to your <head> section in a <script> tag and then use this to scroll to an element with a given ID:
$.scrollTo("#my-element-id");
This will scroll to the element whose ID is my-element-id so you have to use the id=... attribute in the anchors and not the name=... attribute.
If you wish to add this behaviour automatically to all your anchors within a given div (or to the entire page), you can use the LocalScroll plugin which makes the entire this as simple as:
$.localScroll();
So I have an ugly, pre design carousel at roseannebarr.tumblr.com and I plan to place a DIV in the carousel to the left, with a dedicated "About" button. When you click the About button I would like a "left" arrow to show up in it's place. Would I use if else statements? I have little experience in Javascript but I'm learning. Any help is appreciated.
Can't you just place a div like this with a javascript function?
Basically you put the div on the caraousel. This dis has a span with About which is clickable. If clicked it will call a js function.
The js function then drops a new image inside the span.
You can make the image a hyperlink if needed.
<script type="text/javascript">
function ShowArrow(spn){
document.getElementById(spn).innerHtml('<img src="path_to_your_image" />');
}
</script>
<div style="float:left">
<span id="spnAbout" onclick="ShowArrow(this.id);return false;" style="background-color:#ccc;padding:5px;cursor:pointer">About</span>
</div>
If you use jquery, then your function will look like this:
function ShowArrow(spn){
$('#'+spn).html('<img src="path_to_your_image" />');
}
I want to move specific div to up on the up link. Same as to move div to down on the
down link. As shown in screenshot, same as i want to insert div before specific div on the
'IB' link. I want to insert div after specific div on the 'IA' link. To delete specific div on the 'D' link.
alt text http://freeimagehosting.in/images/204_screen_j.jpg
screenshot
Now of course there will be many alternatives are available to achieve above features like jquery, normal javascript, etc.
But I would like to know that which will be the best way to achieve this.
Any feedback would be highly appreciated...!
EDIT : screenshot link is up now !!
jQuery definately makes this sort of thing a bunch easier.
Given this simple markup:
<div class="moveable" id="div1">
One
Move up
Move down<br/>
</div>
<div class="moveable" id="div2">
Two
Move up
Move down<br/>
</div>
<div class="moveable" id="div3">
Three
Move up
Move down<br/>
</div>
This jQuery will move an element up or down:
$('.moveable a.up').live('click',function(){
var $div = $(this).parent('.moveable');
var idx = $div.index();
if(idx>0){
$div.remove();
$('div.moveable:eq(' + (idx-1) +')').before($div);
}
return false;
});
$('.moveable a.down').live('click',function(){
var $div = $(this).parent('.moveable');
var idx = $div.index();
if(idx<$('div.moveable').length-1){
$div.remove();
$('div.moveable:eq(' + idx +')').after($div);
}
return false;
});
That should give you enough to go on to start doing an insert too.
Here's the fiddle if you want a demo: http://jsfiddle.net/5hF98/
Have you looked at the Jquery-UI Sortable code, it may not be exactly what you need, but it is an option.