How to make a moving loop with divs - javascript

I'm trying to make a website that instead of having different pages, I loop through different divs to show differen content. What I'm looking for looks a lot like what happends on this website: http://www.nexon.com/Home/Game.aspx
I would like the divs to 'fly' in from right to left and from left to right on click. I tried to understand the code from the website, but it got me very confused.
I assume there is no need to post code, since the content of my divs do not matter, but to further complete the question, this is what one of divs will look like:
<div>
<img />
<h2>Some header</h2>
<p>Some text</p>
<img />
<p>More text</p>
</div>
So now I would like to loop through those divs in the same way as the website mentioned about does it.

I used a jquery library called JQuery Cycle 2. It is very customizable and allows you to change div automatically or on click as you mentioned in your question. The website has very thorough documentation.

You can use jQuery lbs slider for that!
Put anything inside div like photo text video, It will work!
See link Below
See jsfiddle here
Html
<div class="slider-wrap">
<div class="slider">
<ul>
<li>
<div class="black"> <img src="http://placekitten.com/g/200/200"></div>
</li>
<li>
<span class="red">text 1</span>
<span class="blue">text 2</span>
<span class="blue"><img src="http://placekitten.com/g/200/300" width="100"></span>
<span class="blue"></span>
</li>
<li>
<span class="yellow" style="width:300px;height:200px;">
<iframe width="300" height="200" src="//www.youtube.com/embed/z0DCGnm429Y?list=UUDw2o0zdKA_TS3BsCgbyH4A" frameborder="0" allowfullscreen></iframe>
</span>
</li>
<li>
<span class="blue"></span>
</li>
<li>
<span class="green"></span>
</li>
</ul>
</div>
<
>
</div>
css
.slider-wrap {position: relative;margin: 50px auto;}
.slider {
position: relative;
margin: auto;
}
ul {
margin: 0;
padding:0;
}
ul li {
list-style: none;
text-align: center;
}
ul li span {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
background: black;
margin:5px;
}
.slider-arrow {
position: absolute;
top: 40px;
width: 20px;
height: 20px;
background: black;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.sa-left {left: 10px;}
.sa-right {right: 10px;}
.black {}
.red {background: red;}
.green {background: green;}
.blue {background: blue;}
.yellow {background: yellow;}
js
jQuery('.slider').lbSlider({
leftBtn: '.sa-left',
rightBtn: '.sa-right',
visible: 3,
autoPlay: true,
autoPlayDelay: 10
});

The general idea is to have a "window" div that acts as a viewport to your content divs. With your content divs set to display: inline you can achieve the desired effect via a call to jQuery.animate that moves the inside of your "window" div by the width of a single content div. This is fairly error prone, not to mention tedious to code with end states, start/stop, re-loops, etc.. so it is generally recommended to use a good carousel library which there are plenty of.
Here is an example of doing it yourself
JSFiddle Example
Here are some popular carousel plugins (pretty much just googled 'jquery carousel')
slick
jCarousel

Related

Scroller isn't displaying on the screen

I am having an issue with the position-fix; top 100px;. when I use position-fix; top 100px; and run the program, the result will be "google scroller doesn't show up on the screen". when I don't use when I use position-fix; top 100px; then google scroller shows up on the screen.
Here is the HTML code.
<body>
<section class="container">
<div style="position:fixed; top:180px" class="First">
<ul id="ListName" class="">
<li><a style="text-decoration:none" href="interest.html"> Interest </a></li>
</ul>
</div>
<div style="position:fixed; top:180px;" class="Second">
<h1 align="center"> sport</h1>
<p>
<ul>
<li> soccer and,</li>
<li> football </li>
</ul>
</p>
</div>
</section>
<div id="" class="" style="clear:both;"></div>
</body>
Here is the CSS code.
<style>
.container {
width: 99%;
height: auto;
margin: auto;
padding: 10px;
font-family: Verdana,Geneva,Tahoma,Arial,Helvetica,sans-serif!important;
}
.First {
height: auto;
width: 20%;
background: white;
border:1px solid #666;
float: left;
}
.Second {
margin-left: 21%;
height: auto;
width:640px;
border:1px solid #666;
background: white;
}
</style>
Your requirement is bit confusing, it's not clear that whether you want to make the second div inside the section element scrollable then you can do it by adding a height or max-height property to the Second class.
Same holds true for any container scroll bar appear only when the content inside a div or any container exceeds the height specified.
If you want to make second div scrollable, you need to do following.
.Second {
height:100px !important;
overflow-y: scroll !important;
margin-left: 21%;
height: auto;
width: 640px;
border: 1px solid #666;
background: white;
}
If you want to make body element scrollable then you can set a height property or when your content increases the automatically body will be scrollable.
checkout the fiddle here.
I have added a width property to the second div in order to make it fit in the fiddle window.You may remove it. Also pasted some sample text inside body to demonstrate that body is scrollable when it has enough text or if you want a set a fix height you can do that as well.
NOTE: you need to set the property value with !important so that it overrides and forces browser to apply that css.
height:100px !important;
Hope it helps!!

Can Flexbox help me?

I have inherited somebody else's problem. The HTML is all DIVs with floats, displays and positioning tweaks. The one thing I cannot change is the structured of the HTML DIVs. Nor do I wish to add any new javascript libraries. But I can add all the CSS I need to the existing DIVs.
Currently 3 DIVs are embedded as:
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow">
<DIV> 2 </DIV>
<DIV> 3 </DIV>
</DIV>
Take a look at the graphic below. The problem with this is that as DIV1 grows down, the DIV3 gets bumped down. I wish to keep DIV3 fully justified from the top to bottom (as if STRETCH).
Without getting into how the current code combines DISPLAYS, FLOATS, and POSITIONING -- I think I need to erase all the CSS and replace with some FLEXBOX. But I cannot seem to get the right combination of FLEX properties to make DIV3 behave to stretch (instead of getting bumped down).
Fortunately, this only has to work for Chrome on Desktop (no mobile nor other browsers).
There you go IF width of div 3 is known and fixed value:
https://codepen.io/AugustinF/pen/qYBpmR
.wrapper {
position: relative;
border: 2px solid black;
}
#firstrow {
height: 100px;
margin-right: 200px;
background: green;
}
#secondrow {
}
#div2 {
float:left;
background: blue;
}
#div3 {
width: 200px;
position: absolute;
top:0;
right:0;
height: 100%;
background: red;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
HTML:
<div class="wrapper clearfix">
<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow clearfix">
<DIV id="div2"> 2 </DIV>
<DIV id="div3"> 3 </DIV>
</DIV>
</div>
Using #Pete solution you can modify the HTML structure using javascript by placing this code at the end of the body tag:
<script>
document.getElementById('firstrow').appendChild(
document.getElementById('div2')
);
</script>

Percentage of a upper level div?

I have a horizontal, 930px wide menu, that stretches across the whole width of a page on <768px resolution. At the moment, only the inline anchor tags are clickable, but I found out it is quite impossible to make the whole li clickable while mantaining 'responsivness'. I've tried numerous solutions, right now I am using display:table on the ul, display:table-cell on the li and a JS to make it stretch across the whole container. Works great on <768px, but at 930px, paddings inbetween anchor and their li containers become uneven. Screenshot and code below. (last menu item has display:none and is there because of the mobile menu version, please ignore it)
So, is there a way to have anchor paddings as percentages of the width of the UL? If not, how can I solve this?
HTML:
<!-- Responsive menu -->
<nav class="btn1content btncontent main-menu-wrapper hidden">
<ul class="main-menu" align="right">
<li class="item cyan">Úvod</li>
<li class="item orange active">Aktuality</li>
<li class="item yellow">Domény</li>
<li class="item brown">Registrátori</li>
<li class="item blue">CMS & Frameworky</li>
<li class="item pink">Trendy</li>
<li class="item green ">Zoznam</li>
<li class="item sand">Sledovanie domén</li>
<li class="item darkgray">Kontakt</li>
<li class="item item-last"></li>
</ul>
<!-- Clear -->
<div class="clear"></div>
</nav>
CSS:
.main-header .main-menu-wrapper {
margin: -3px auto;
width: 100%;
display: table;
border-collapse: collapse;
position: static;
height: auto;
background: #ffffff;
border-top: none;
border-bottom: none;
}
.main-header .main-menu-wrapper .main-menu {
display: table-row;
}
.main-header .main-menu-wrapper .item {
text-align: center;
border-top-style: solid;
border-top-width: 3px;
border-left: none;
border-right: none;
height: auto;
display: table-cell;
padding: 0;
width: auto;
}
.main-header .main-menu-wrapper .item a {
padding: 42px 0;
}
Screenshot (up - what it looks like now, below - what it should look like)
p.s. can't post pictures yet
http://i.stack.imgur.com/An4hh.png
Demo is up on
http://statistikydomen.magnetica-hosting.sk/tmpl/index.html
Change this:
.main-header .main-menu-wrapper .item a {
padding: 42px 0;
}
To this:
.main-header .main-menu-wrapper .item a {
display: block;
}
That will make your anchors fill out to the width of their parents (the li elements).
The table-cell display of those li will make the browser calculate a propert width for each item. Those widths might vary a little, based on the length of the captions and possibly even the browser/version, but I wouldn't worry too much about that. Responsive isn't always pixel perfect. Any way, you will get a quite nice division of the elements and the anchors will fill the entire width of the li, making the whole menu area clickable.
PS:
Formally you will have to write & in CMS & Frameworky as &.
You don't need the 'clear' div if you implement one of the tricks
described here: http://css-tricks.com/snippets/css/clear-fix/

CSS Floats On Same Line Variable Amount

I want to have horizontal lists that can run as wide as possible but within a fixed width container. I am using jQuery to allow scrolling on the really wide list, and overflow:automatic for users without javascript.
I have code along the lines of this:
<div class="list">
<ul>
<li class="feed">
<section>
<h1><span class="name">Title</span></h1>
<div class="scroll_left"><a class="ir" href="#">Scroll Back</a></div>
<div class="article_list">
<ul class="article_list">
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<li>
<a href="article.php">
<div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div>
<h2>Title of article</h2>
</a>
</li>
<!-- variable number of li's, from 10s to 100s -->
</ul>
</div>
</section>
</li>
<!-- More of these lists -->
</ul>
</div>
I'll just give a subset of my css that I think is relevant:
.feed .article_list {
position: relative;
overflow: auto;
float: left;
width: 900px;
}
.feed .article_list ul {
position: relative;
width: 10000px; /** I want this to be wide, but not allow scrolling past the end*/
margin: 0;
background-color: #ffffff;
}
.feed .article_list li {
display: block;
width: 130px;
height: 150px;
position: relative;
float: left;
border-right: 2px solid #b5e8f4;
border-left: 2px solid #b5e8f4;
margin: 0 5px 0 0;
}
My javascript is:
$(document).ready(function() {
$('div.article_list').css({
'overflow' : 'hidden'
});
$('.scroll_left a').click(function() {
toScroll = $(this).parent().next();
toScroll.animate({scrollLeft: "-=135"});
return false;
});
$('.scroll_right a').click(function() {
toScroll = $(this).parent().prev();
toScroll.animate({scrollLeft: "+=135"});
return false;
});
});
So as it is, I either have to make the inner ul really wide, so users can scroll well beyond the list items, or I can restrict it but if I add too many items (dynamically, so I don't have a lot of control), then the layout breaks.
Can I somehow get that scrollable area to just be as wide as its floated contents?
Or is the only solution to set the width in javascript (less than ideal, but I can do that)?
Its the float: left on the .feed .article_list that you really don't want but I've removed it from all of them that I could.
I would move to an inline setup instead of floating:
.feed .article_list {
position: relative;
overflow: auto;
width: 100%; /* specify what ever width you want. I think 100% is proper. */
}
.feed .article_list ul {
position: relative;
overflow-x: scroll;
margin: 0;
background-color: #ffffff;
white-space: nowrap;
}
By making the overflow-x: scroll you have a permanent scroll bar (not totally necessary, it can be removed if you prefer). The white-space: nowrap Will keep the children on one line (instead of floating.)
.feed .article_list li {
display: inline-block;
// etc. etc. etc. ...
on the children display: inline-block; will let you specify height/width like a block element and keep them inline at the same time.
JsFiddle:- http://jsfiddle.net/GBtCb/
UPDATE :-
In an effort to make it cross-browser compatible make the following changes:
remove the overflow: auto from .feed .article_list
and add:
.feed
{
overflow: hidden;
}
.article_list
{
overflow: auto;
from quirksmode.com:
http://www.quirksmode.org/css/whitespace.html : white-space: nowrap is compatible IE7+.
-

Floating columns both ways in JavaScript

I am trying to float columns using CSS so they stack up evenly like on this blog: http://typeneu.com
It seems to be impossible using CSS so I am looking into JavaScript.
The website listed above uses this JavaScript file: http://typeneu.com/wp-content/themes/grid-a-licious/scripts/grid-a-licious.js
I have tried to implement it to experiment but it doesn't seem to be working.
Any links to tutorials on this subject or suggestions for getting it to work with JavaScript or CSS?
Edit: I would like the number of columns to be flexible with the screen resolution.
I have a site which basically has DIV's float left with a set pixel width. Depending on the resolution and window size I might have 1-n columns, You should be able to basically:
<style>
.myClass
{
float:left;
width:350px;
}
</style>
<div class="myClass>my content</div>
<div class="myClass>more content</div>
<div class="myClass>even more content</div>
To get a fixed number of columns I'd assume you can calculate the width using javascript or perhaps there is some other trick.
Edit
Ok looking at their JS file you need to make sure you match up your class and id's to match what they are expecting Looks like all your posts need to be ina div with an id of allposts.
Check out the HTML of the site you typenu site you referenced and get your html to match theirs.
Keep it simple. This should make a nice page... the css should include this:
.header,.bod,.footer { width: 700px; margin: 0 auto; }
.header { border-bottom: 3px solid #CCC; margin-bottom: 1.0em; }
.footer { border-top: 3px solid #CCC; padding-top: 1.0em; }
.first, .second, .third, .fourth { position: absolute; top: 0; left: 0;}
.first { width: 100px; left:10px;}
.second { width: 100px; left:110px;}
.third { width: 100px; left:220px;}
.fourth { width: 100px; left:330px;}
.clear,.tall { position: relative; } /*\*/* html .clear{ display: inline;}
.tall:after { content: ''; } /*fix of safari bug?*/
and some html (inside the body, after you have called the css):
<body>
<div class="header">TITLE</div>
<div class="bod clear">
<div class="first tall"> Lorem ipsum </div>
<div class="second"> Lorem ipsum </div>
<div class="third"> Lorem ipsum </div>
<div class="fourth"> Lorem ipsum </div>
</div>
<div class="footer" >FOOTER</div>
</body>
</html>
Simple, works, right?
After placing first component on the page, take dimensions of that, then place next components one by one on the UI using absolute placing.
That JavaScript file is actually part of this plugin:
http://suprb.com/apps/gridalicious/
It's not that hard to do in CSS, however. You just need to use floats.
For example:
<div style="float:left">Hello</div>
<div style="float:left">I'm also saying hello</div>
<div style="clear:both;"></div>
<div style="float:left">Hi again</div>
<div style="float:left">From the second line, that too!</div>
<div style="clear:both;"></div>
Is it clear enough?

Categories