How to cycle a single div in an element with jQuery - javascript

I am trying to see if the following is possible:
I want to be able to cycle a single div within an element continuously [so the start of the div is by the end of the same div as it cycles.]
This doesn't have to be an existing plugin. I would prefer to not clone the div if possible. The div's width will be set via javascript prior to cycle but might be adjusted in small amounts.
I would appreciate any ideas!

jsBin demo
jQuery:
$('.scroller').each(function(){
$(this).find('img').clone().appendTo($(this));
});
(function move(){
$('.scroller').scrollLeft(0).stop().animate({scrollLeft:310},800,'linear',move);
})();
HTML:
<div class="scroller">
<img src="" alt="" />
</div>
CSS:
.scroller{
width:310px;
height:80px;
white-space:nowrap;
word-spacing:-1em;
overflow:hidden;
margin:30px;
}
.scroller img{
display:inline;
}
It will make clones only once. Than my jQuery script will create a loop that will just play with the scrollLeft() element property.
N.B: this is just a plain example, you could make 310px be dynamically calculated, but that's another story, let's keep it simple.

What about the marquee plugin?
Demo
Docs
Note that first example in the Demo, that scrolls left, if you set the width of the container to the same size or smaller than your content to scroll it will appear to cycle fluidly.

Related

Customizing where a div wraps to

Is it possible to have two divs wrap as if their one line?
<div class="multiLine">
<div class="topLine"></div>
<div class="bottomLine"><div>
</div>
so if top line was all "A"'s and the bottom line was all "B"'s we would see it wrap like
AAAAAAAAA
BBBBBBBBB
AAAAAAAAA
BBBBBBBBB
I'm trying to accomplish this with JavaScript, jQuery, and css3.
This could actually be done just by using CSS and playing with the div positions and the line heights.
For example:
.multiLine {
position:relative;
width:100px;
eight:100px;
}
.topLine {
position:absolute;
word-break:break-all;
line-height:40px;
top:20px;
}
.bottomLine {
position:absolute;
word-break:break-all;
line-height:40px;
}
This would work although it may not be an optimal solution for what you want. It depends on the context and what you want to achieve with this effect.
EDIT: You can see an example of how it would look like here: http://jsfiddle.net/78f94/
You cannot do it with html/css alone. But with Javascript you can find viewport width, truncate the string and add it as content to new inner divs. This could get very complicated when you resize as width changes!
Here is more info on getting viewport width: Get the browser viewport dimensions with JavaScript

Can't style a div with javascript

I am applying style qualities to a div containing external javascript, and they seem to be ignored by the browser. The first div works correctly.
http://jsfiddle.net/TxWN3/2/
<div style="text-align:center;">Working center text</div>
<div id="btc-quote" style="text-align:center;"></div>
<script type="text/javascript" src="//cdn-gh.firebase.com/btcquote/embed.js"></script>
The content of the div class="btc-quote" might have some css code not wanting it to center. (I have not read all that code from BTC) To workaround this, you can make the div itself centering, not the content.
A simple trick to do this is add the following css to the div:
width:212px;
margin:auto;
This is a nice workaround found here
If you want to center it, first give it a width and then margin:0 auto:
<div id="btc-quote" style="width:212px;margin:0 auto"></div>
To center your included div, add this CSS:
.btc-box {
margin:0 auto;
}
jsFiddle example
The text-align:center; CSS property is not used in the way you are assuming.
If you check this fiddle, you will see that the default width of a div is the width of the container, and so when you center the text it appears the div is centered. However this is not the case.
To center a Div you can use the Position CSS property :
Add the following CSS attributes :
position:absolute;
left:50%;
margin-left:-106px; /* Half of the width of the div */
And see the following fiddle for the Second Div being center aligned
http://jsfiddle.net/Nunners/TxWN3/7/

How to move div upward while scrolling downward

I am creating a small html file for myself just to try some new things. so far, I have a header, a background, and a center area for content. it is in the center and the position is set as fixed.
I want to make it so when someone scrolls down, the center area will move up. So there wont be large white-space at the top. Also, when they scroll up, so the center is near the top, it wont go over the header.
I"m sure this can be done with JavaScript. But, I'm not too sure how.
I'm sorry if this is unclear.
I recommend using jquery to accomplish this.
You can bind an event listener to the scroll event, the handler is passed an event object with all the information you need to achieve your desired result (scrolltop, pageX, pageY, etc....)
Once you have captured the scroll event, you can tell where the user scrolled to (how far down), and position your div accordingly.
http://api.jquery.com/scroll/
This could be achieved using javascript or Jquery (Jquery being the easiest of the two).
1.) Use arbitrary pixels to define when the div should move.
function scrolling() {
if ($(body).scrollTop() > 120px)
{
....perform div transition...
}
}
OR
2.) Use the position of the target div to define when the div should move.
function scrolling() {
if ($(body).scrollTop() > $("#TargetDiv").offset().top;)
{
....perform div transition...
}
}
If you use the second solution, be sure that you call Jquery and this script after the DOM is loaded i.e. after </body>. Otherwise it won't be able to define the #TargetDiv.
This can be done without use of jquery or javascript, if you are looking to do what I think you are.
http://jsfiddle.net/wN8c8/
by setting your content to a fixed size and setting the content to overflow:auto;
likewise, you could also set your page background-attachment to fixed, and create the illusion that the text is 'appearing' without the page moving. You can certainly go more in-depth with it using scripting, but it really depends on your intention.
z-index will also allow you to build your page in layers, so that you can determine what shows and what is hidden behind other page elements.
body {
background-color:yellow;
}
#header{
position:fixed;
width: 100%;
height:20px;
background-color:red;
z-index:2;
}
#content{
position:fixed;
width:80%;
height:60%;
background-color:#ddd;
overflow:auto;
margin:0px 10%;
z-index:1;
}
<div id="header"></div>
<div id="content">
This is some content.<br/>
This is some content.<br/>
This is some content.<br/>
</div>

set the div to position:relative from position:absolute; when using turn.js

this is a simple question, I've just started using the turn.js library and want to relatively position image elements with reference to a container div, to do this, it would look something like:
<div id="cont" style="position:relative;">//this div acts a page
<img src="my.jpg" style="position: absolute; top:40px; left:50px;">
</div>
the div, using the library, would serve as the page to be flipped, the problem is that whenever i set the container div to position relative, it gets turned into position absolute automatically by the turn.js library when the page loads, is there a way to ensure that the divs which get turned into pages all have position:relative; instead of position:absolute;? Thank You in advance.
Try this hope this may solve your problem
#cont {
position:relative !important;
}

Scroll a div 30px when anchor clicked

What's the best way to scroll a div with overflow:auto by a certain pixels or certain percentage when clicking an anchor? The HTML is very simple:
<style>
#container{
height:250px;
overflow:auto;
</style>
<div id="container">
<p>Lots of Content</p>
</div>
Scroll Down
When I click the anchor above, I want to scroll that div above a certain amount of pixes, say 30px. I'm hoping jQuery has something built in that makes this simple.
$('#scrolldiv').click(function(e){
var current = $('#container').scrollTop();
$('#container').scrollTop(current + 30);
e.preventDefault();
});​
jsFiddle
For that purpose I would use jQuery's animate:
$('#scrolldiv').click(function(){
$('#container').animate({scrollTop: '+=30'});
});
I belive it's got the shortest syntax for this and it looks nice.
jsFiddle example

Categories

Resources