How to auto-scroll images horizontally in responsive design - javascript

So i have this site: http://onthemouse.com/. I have my portfolio images in a grid like formation using the <li> tag on the front page. I need them to align side by side and scroll horizontally automatically, maybe using javascript or jquery (no other libraries, please). It's fine if it has a scrollbar as well. I've tried something like this:
.portfolio li {
width: 438px !important;
display:inline !important;
}
and then
<ul id="thumbs" style="width:100%;list-style:none;display:block;white-space:nowrap;">
<li class="portfolio" style="width: 438px; opacity: 1;display:inline;">
<a href="BLAHBLAH" title="BLAHBLAH">
<img src="BLAHBLAH" alt="" title="" >
</a>
</li>
that's basically just a stripped down version if you vist the page theres a lot more tags associated. but even this code alone (with all the tags closed obviously) didn't seem to work..

You could consider using Flexislider for your problem here. It's a responsive slider.
http://www.woothemes.com/flexslider/

remove display:inline, width from style attr of your li
<ul id="thumbs" style="list-style:none;">
<li class="portfolio" style="opacity: 1;">
<a href="BLAHBLAH" title="BLAHBLAH">
<img src="BLAHBLAH" alt="" title="" >
</a>
</li>
#works, #wrapper {
overflow: visible;
}
body {
overflow-x:auto;
}
#thumbs .portfolio {
display:inline-block;
width: 438px !important;
float:none !important;
}
#thumbs {
white-space:nowrap;
}
/* for ie 7*/
*:first-child+html #thumbs .thumb {
display:inline;
zoom:1;
}
/* for ie 6*/
*html #thumbs .thumb {
display:inline;
zoom:1;
}

Related

Change html hierarchy using jquery for mobile layout

I'm creating a responsive website and the menus for the tablet and mobile layouts need to be different then the pc layout. So my client wants his logo coming first to the tablet/mobile layout, i tried to use jquery but is not working, can someone help me?
I need the li fot the logo be the first when the window width is lesser then 1024px, but my jquery is not working.
html:
<nav class="nav">
<ul>
<li><img class="lupa" src="img/lupa.png" alt="Search" onClick="ShowFieldSearch()">
<div id="boxSearch">
<form id="formSearch" action="" method="get">
<input id="search" type="text" value="" maxlength="150" placeholder="Search..." onBlur="HideFieldSearch()">
</form>
</div>
</li>
<li>Home Page</li>
<li>Products<img class="flechaVertical" src="img/flecha.png" alt="flecha">
</li>
<li><img id="navLogo" class="navLogo" src="img/logotipo.png" alt="Versatyll"></li>
<li>About</li>
<li>Contats</li>
<li>Doubts</li>
</ul>
</nav>
CSS:
#boxSearch{
padding-left:15px;
}
#Search{
width:160px;
height:50px;
margin-left:10px;
display:none;
position:absolute;
text-align:center;
border:1px solid #222222;
}
/* -------------------------------*/
/* Navigation Menus */
.lupa{
width:30px;
height:30px;
padding-left:35px;
}
.flechaVertical{
width:8px;
height:8px;
padding-left:5px;
}
.navLogo{
width:160px;
height:90px;
}
.nav{
width:200px;
margin: 0;
text-align: left;
background-color: #FFFFFF;
position: fixed;
}
.nav ul{
list-style:none;
padding:0;
margin:0;
position:relative;
}
.nav ul li{
display:block;
}
.nav ul li a,visited{
color:#000000;
display:block;
padding:10px;
padding-left:30px;
text-decoration:none;
}
.nav ul li a:hover{
color:#990000;
text-decoration:none;
}
Jquery:
$(document).ready(function(){
var $logo = $(".nav ul li").eq(3);
function PositionLogo(){
if($(window).width() < 1024){
$logo.remove().insertBefore(".nav ul li:first-chiild");
}
else{
$logo.remove().insertAfter(".nav ul li:nth-child(3));
}
}
});
There might be a better option but this works as well :
Your jQuery needs to be cleaned too.
HTML
<li class="logo">
<img id="navLogo" class="navLogo" src="img/logotipo.png" alt="Versatyll">
</li>
jQuery
$(document).ready(function() {
alert($(window).width() + "doc");
var $logo = $(".logo");
if ($(window).width() < 1024) {
$logo.remove();
$(".nav ul li:first-child").append($logo)
}
});
since you're firing it on document ready i dont think you need the else condition.
Also, your code wouldn't change the position if the window is resized.
Also, I think its better to fire it.
$(window).load(function() {
// your code
});
and here's the JSFiddle
If you need this small change just skip Jquery and use CSS Media Queries to hide and display a logo for desktop and one for mobile using ids.
Here is the fiddle (resize the results block). It will change at 800px in this case so you can see the results on the fiddle.
First add this line in your head for responsiveness
<meta name="viewport" content="width=device-width, initial-scale=1">
HTML:
<nav class="nav">
<ul>
<li id="logo_nav">Logo Nav</li>
<li><img class="lupa" src="img/lupa.png" alt="Search" onClick="ShowFieldSearch()">
<div id="boxSearch">
<form id="formSearch" action="" method="get">
<input id="search" type="text" value="" maxlength="150" placeholder="Search..." onBlur="HideFieldSearch()">
</form>
</div>
</li>
<li>Home Page</li>
<li>Products<img class="flechaVertical" src="img/flecha.png" alt="flecha">
</li>
<li id="logo_desktop"> logo Desktop</li>
<li>About</li>
<li>Contats</li>
<li>Doubts</li>
</ul>
</nav>
CSS
#logo_nav{
display: none;
}
#media only screen and (max-width: 1024px) {
#logo_desktop {
display: none;
}
#logo_nav {
display: block;
}
}
This should work

CSS:hover:after overlay breaks jquery on click for me

I have a jQuery lightbox setup with a number of 300x300px images that on click open the lightbox. I would like to be able to overlay an semi-opaque background and text information with the video titles on the CSS :hover:after. The overlay works correctly and the lightbox works without the overlay code in place. But as soon as I combine the two the hover works but blocks the on click. Here is my HTML code:
<div class="screenShot" id="video1">
<a href="#"data-videoid="21183190" videosite="vimeo">
<img src="http://www.gorillacreativemedia.com/wp-content/themes/gorillashifter/img.php?mw=300&mh=300&src=library/images/noimage.png" />
</a>
</div>
And here is the CSS:
.screenShot{
display:inline-block;
position:relative;
margin:20px;
}
.ScreenShot img {
max-width: 100%;
height: auto;
}
#video1:hover:after {
content: '\A';
position: absolute;
width:300px;
height:300px;
background:rgba(255,0,0,0.6);
top:0;
left:0;
padding:100px auto;
text-align:center;
vertical-align:middle;
}
I don't know if I should be trying to trigger this off of a Javascript function instead or if I'm missing something simple with the formatting.
Use z-index:
CSS:
#video1:hover:after {
content:'\A';
position: absolute;
width:300px;
height:300px;
background:rgba(255, 0, 0, 0.6);
top:0;
left:0;
padding:100px auto;
text-align:center;
vertical-align:middle;
z-index:-1 //Generally lower than the element's z-index
}
Demo: http://jsfiddle.net/GCu2D/843/
I figured it out. The tag has to wrap around the element that you're putting the hover event on. I changed the HTML to this:
<div class="screenShot">
<a href="#" data-videoid="21183190" data-videosite="vimeo">
<div id="video1">
<img src="http://www.gorillacreativemedia.com/wp-content/themes/gorillashifter/img.php?mw=300&mh=300&src=library/images/noimage.png" />
</div>
</a>
</div>
Kept the CSS the same and it appears to work as intended now.

How to make a moving loop with divs

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

How could I use the html a tag to change div width and height?

<div class="panel">
<a href onclick="manipulate()">Show Quick Admin (↑)</a>
<div class="hidden">
<ul>
<li>
Panel
</li>
</ul>
</div>
</div>
so i am tying to make a "quick admin bar", for the site i'm making. this is the code i am using, don't mind the fact it's bad. i tried to make it check the height and width of the div "panel", and if it was 20px, change the "a" tag's innerHTML, show the "hidden" div, and make it so that if you click the "a" tag again it will set the div height back from 300px to 20px, change the a tag's innerHTML again, and hide the "hidden" div from viewing. how would i do this?
javascript:
function manipulate() {
if ($("#panel").height() == "20") {
document.getElementsByClassName("panel").style.height= "300px";
document.getElementsByClassName("hidden").style = "";
}
}
css:
.panel {
padding:10px;
background:#fffdbb;
position:fixed;
bottom:15px;
width:225px;
height:20px; /* 300px */
right:15px;
border:10;
border-style:solid;
border-width:2px;
border-color:red;
}
.hidden {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
right now it just doesn't do anything when Show Quick Admin is clicked. how can i fix this?
you should use [0]
document.getElementsByClassName("panel")[0].style.height= "300px"
Why dont you use this if you are using jquery?
$(".panel").css("height","300px");
I would suggest you to use id instead of class
<div class="panel">
vs
<div id="panel">
The proper way of Using
http://jsfiddle.net/sb3fY/1/
<div id="panel">
<span class="link1">Show Quick Admin (↑)</span>
<div class="hidden">
<ul>
<li>
Panel
</li>
</ul>
</div>
</div>
Javascript
$(".link1").on("click",function(){
$("#panel").toggleClass("open");
$("#hidden").toggle();
});
CSS
#panel {
padding:10px;
background:#fffdbb;
position:fixed;
bottom:15px;
width:225px;
height:20px; /* 300px */
right:15px;
border:10;
border-style:solid;
border-width:2px;
border-color:red;
}
.hidden {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
#panel.open {
height: 300px;
}

Width issue with website dropdown menu

So ive just started the master page for my new site and i put in a dropdown menu which i tested out by dropping it from the home button. Image below:
http://prntscr.com/28qnk2
My problem occurs when i tried to apply the same code to my plugins button in the menu, the whole thing spaces out. Image below:
http://prntscr.com/28qpky
This is the first time ive tried to build in a dropdown menu so my initial attempts probably have some issues with them but i cant seem to get this to work. Here is the code for the menu (html).
<div id="menu">
<table id="menu_table">
<tr>
<td id="home" class="menu_item" style="position:relative; z-index: 1000">
<ul class="dropdown">
<li><p>Home</p>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
</ul>
</td>
<td id="about_us" class="menu_item">About Us</td>
<td id="plugins" class="menu_item">
<ul class="dropdown">
<li><p>Plugins</p>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</li>
</ul>
</td>
<td id="tutorials" class="menu_item">Tutorials and Help</td>
<td id="staff" class="menu_item">Staff</td>
<td id="chat" class="menu_item">ChatRoom</td>
</tr>
</table>
</div>
and here is the CSS for the menu:
#menu {
position:relative;
float:right;
margin:2px;
margin-right:13%;
width:52%;
height:77px;
}
#menu_table{
position:relative;
top:12%;
height:76%;
width:100%;
border-spacing:0px;
}
.menu_item:first-child{
border-left:1px solid #40d7bc;
}
.menu_item:hover{
background-color: black;
color:#40d7bc;
}
.menu_item{
border-right:1px solid #40d7bc;
text-align:center;
}
ul.dropdown li ul {
display:none;
position:absolute;
z-index:100;
padding-left:50%;
top:35px;
width:100%;
}
ul.dropdown li ul li {
position:relative;
border-top:30px solid black;
left:-50%;
background-color: black;
}
ul.dropdown li ul li:last-child {
border-bottom:15px solid black;
}
.menu_item li {
list-style-type: none;
}
and finally the small bit of jQuery i used.
function() {
$('ul', this).stop(true, true).slideToggle(100); },
function() {
$('ul', this).stop(true, true).slideToggle(100); }
);
Thanks for any help on this, im completely lost on whats wrong with it.
The only idea i may have with what the issue is, is how i aligned the text to the center. I did it by padding the ul containing the submenus by 50% width, this way the left side of the ul was down the middle and when i shifted the submenu items left by 50% width they were in the middle. You're probably thinking why shift them at all, well for some reason if i left them in the middle it covered up part of the borders on the menu, screenshot:
www.prntscr.com/28qwvv
If I'm being an idiot and my question is stupid please feel free to point it out as long as you give me a reason
I noticed that you are applying an inline style position relative to your home TD.. Remove the inline style and add this to your css.
.menu_item {
position: relative;
}
This should do the trick. Relative elements will contain absolute elements, and it appears that you are not containing it to the plugin width. See my comments above.

Categories