I can't get my website to smooth scroll - javascript

I'm trying to get anchor tags to scroll down to sections of my website but I can't get it to work. This is where I'm getting the code from: http://www.cmscanbesimple.org/blog/smooth-page-scroll-to-an-anchor. I copied it into its own HTML file and it worked perfectly so I can't figure out why it's not working on my site.
<head>
<meta charset="utf-8">
<title>J2 Productions</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="parrallax.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<div id="paintsplash">
<img src="paint_splash.png" height="93%" width="93%" />
</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div id="middle">
<div id="services">
<div id="s_content">
<div id="s_title">
<p>Beats</p>
</div>
<div id="beat1">
<p>| Limitless |</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/186082426&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat2">
<p>| Haze |</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/176496757&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat3">
<p>| Self-Destruct |</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/159969838&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat4">
<p>| Midnight Bass |</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/162606984&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
</div>
<div id="recent">
<div id="r_content">
<div id="r_title">
<p>Recent</p>
</div>
<div id="one">
<a href="https://itunes.apple.com/us/album/one-ep/id984646172">
<img src="Front%20Cover.jpg" width="300">
</a>
</div>
<div id="onetxt">
<p align="center">
| Speaking My Language |
<br/>| Pay Up |
<br/>| One Way |
</p>
</div>
<div id="rollin">
<a href="https://itunes.apple.com/us/album/rollin-i-dont-wanna-grow-up/id925559884">
<img src="rollin.jpg" width="300">
</a>
</div>
<div id="rollintxt">
<p align="center">| Rare of Breed - Rollin' |</p>
</div>
</div>
</div>
<div id="pricing">
<div id="p_content">
<div id="p_title">
<p>Pricing</p>
</div>
<div id='exclusive'>
<img src="Exclusive.png" width="650">
</div>
<div id="custom">
<img src="custom.png" width="650">
</div>
</div>
</div>
<div id="aboutme">
<div id="a_content">
<div id="a_title">
<p>Contact Me</p>
</div>
<div id="me">
<img src="me.png" width='350px' />
</div>
<div id="email">
<img src="contact.png" width="100%" height="600px">
</div>
<div id="social">
<div id="fb">
<a href="https://www.facebook.com/J2producing">
<img src="facebook.png" width="113px">
</a>
</div>
<div id="tw">
<a href="https://twitter.com/j2_productionz">
<img src="twitter.png" width="113px">
</a>
</div>
<div id="ig">
<a href="https://instagram.com/j2productions">
<img src="instagram.png" width="123px">
</a>
</div>
<div id="yt">
<a href="https://www.youtube.com/channel/UC2Z9nuiZHdU6fN-UfOie6QA">
<img width="123px" src="youtube.png">
</a>
</div>
<div id="gp">
<a href="https://plus.google.com/u/0/b/100577545228957896103/100577545228957896103/about?hl=en">
<img src="google.png" width="115px">
</a>
</div>
<div id="sc">
<a href="https://soundcloud.com/j2productions">
<img src="soundcloud.png" width="115px">
</a>
</div>
</div>
</div>
</div>
<div id="seperators">
<a id="page1"></a>
<div id="page2"></div>
<div id="page3"></div>
<div id="page4"></div>
</div>
</div>
</div>
</div>
<div id="top">
<a href="index.html">
<img src="J2Productions-text.png" id="logo" draggable="false">
</a>
BEATS
RECENT
PRICING
ABOUT ME
<img src="line.png" id="line">
</div>
<div id="bottom"></div>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#paintsplash').fadeIn(1200).delay(3500);
});
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
});
});
</script>
</body>


The anchor href is the target id. Since your anchor href is set to #page1, then the target is <a id="page1">. You must change them. Example:
<div id ="top">
<img src="J2Productions-text.png" id="logo" draggable="false">
BEATS
RECENT
PRICING
ABOUT ME
<img src="line.png" id="line">
</div>
EDIT
Check this:
<div id="seperators">
<a id="page1"></a>
<div id="page2"></div>
<div id="page3"></div>
<div id="page4"></div>
</div>
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<div id="paintsplash">
<img src="paint_splash.png" height="93%" width="93%"/>
</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div id="middle">
<div id="services">
<div id="s_content">
<div id="s_title">
<p>Beats</p>
</div>
<div id="beat1">
<p>
| Limitless |
</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/186082426&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat2">
<p>
| Haze |
</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/176496757&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat3">
<p>
| Self-Destruct |
</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/159969838&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
<div id="beat4">
<p>
| Midnight Bass |
</p></br>
<iframe width="35%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/162606984&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
</div>
<div id="recent">
<div id="r_content">
<div id="r_title">
<p>Recent</p>
</div>
<div id="one">
<a href="https://itunes.apple.com/us/album/one-ep/id984646172">
<img src="Front%20Cover.jpg" width="300">
</a>
</div>
<div id="onetxt">
<p align="center">
| Speaking My Language |<br/>
| Pay Up |<br/>
| One Way |
</p>
</div>
<div id="rollin">
<a href="https://itunes.apple.com/us/album/rollin-i-dont-wanna-grow-up/id925559884">
<img src="rollin.jpg" width="300">
</a>
</div>
<div id="rollintxt">
<p align="center">
| Rare of Breed - Rollin' |
</p>
</div>
</div>
</div>
<div id="pricing">
<div id="p_content">
<div id="p_title">
<p>Pricing</p>
</div>
<div id='exclusive'>
<img src="Exclusive.png" width="650">
</div>
<div id="custom">
<img src="custom.png" width="650">
</div>
</div>
</div>
<div id="aboutme">
<div id="a_content">
<div id="a_title">
<p>Contact Me</p>
</div>
<div id="me">
<img src="me.png" width='350px'/>
</div>
<div id="email">
<img src="contact.png" width="100%" height="600px">
</div>
<div id="social">
<div id="fb">
<a href="https://www.facebook.com/J2producing">
<img src="facebook.png" width="113px">
</a>
</div>
<div id="tw">
<a href="https://twitter.com/j2_productionz">
<img src="twitter.png" width="113px">
</a>
</div>
<div id="ig">
<a href="https://instagram.com/j2productions">
<img src="instagram.png" width="123px">
</a>
</div>
<div id="yt">
<a href="https://www.youtube.com/channel/UC2Z9nuiZHdU6fN-UfOie6QA">
<img width="123px" src="youtube.png">
</a>
</div>
<div id="gp">
<a href="https://plus.google.com/u/0/b/100577545228957896103/100577545228957896103/about?hl=en">
<img src="google.png" width="115px">
</a>
</div>
<div id="sc">
<a href="https://soundcloud.com/j2productions">
<img src="soundcloud.png" width="115px">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id ="top">
<img src="J2Productions-text.png" id="logo" draggable="false">
BEATS
RECENT
PRICING
ABOUT ME
<img src="line.png" id="line">
</div>
<div id="bottom">
</div>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#paintsplash').fadeIn(1200).delay(3500);
});
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);
} );
} );
</script>

Related

Photo Gallery Play and Pause Button

dears friends.
I found this photo gallery ins this site: http://playgallery.siteseguro.ws/
I would like to use it but the play and pause button don't get anywhere. The buttons are not working and I don't see any code to make this work.
Is it possible to make this work? Below is the optimized code:
<html>
<head>
<link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-bootstrap.css"/>
<link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-style.css"/>
<link rel='stylesheet' id='fontawesome-css' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' />
</head>
<body>
<div class="col-slick-4">
<div class="slick-gallery">
<div class="slick-slider carousel-child" id="child-carousel" data-for=".carousel-parent" data-arrows="true" data-loop="false" data-dots="false" data-swipe="true" data-items="4" data-xs-items="4" data-sm-items="4" data-md-items="4" data-lg-items="5" data-slide-to-scroll="1">
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s1.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s2.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s3.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s4.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s5.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s6.jpg"/>
</div>
</div>
</div>
</div>
<div class="slick-controls">
<div class="slick-controls-pause"><span class="fa fa-pause"></span></div>
<div class="slick-controls-play"><span class="fa fa-play"></span></div>
</div><br><br>
<div class="slick-slider carousel-parent" data-arrows="false" data-loop="false" data-dots="false" data-swipe="true" data-items="1" data-child="#child-carousel" data-for="#child-carousel" data-lightgallery="group">
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s1.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s2.jpg" height="480" /></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s3.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s4.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s5.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s6.jpg" alt="" height="480"/></div>
</div>
</div>
</div> <!-- /col-slick-4 -->
<script src="http://playgallery.siteseguro.ws/js/novagaleria/slick-core.min.js"></script>
<script src="http://playgallery.siteseguro.ws/js/novagaleria/slick-script.js"></script>
</body>
</html>

you would have to add some jquery
$('.slick-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
pauseOnDotsHover:false,
autoplaySpeed:500,
dots: false,
arrows: false,
infinite: true
});
$('#pause').click(function() {
$('.slick-slider').slick('slickPause');
});
$('#play').click(function() {
$('.slick-slider').slick('slickPlay');
});
And then edit your buttons to have an id of pause and play respectively and remove the a tag
<div class="slick-controls">
<div class="slick-controls-pause slick-play"><span id="pause" class="fa fa-pause"></span></div>
<div class="slick-controls-play slick-play"><span id="play" class="fa fa-play"></span></div>
</div><br><br>
If you want to keep the pointer on hover. Instead of using an a tag. Use cursor: pointer; on your .slick-play

JQuery hide/show content of multiple divs on click

I'm trying to show/hide multiple divs at the same time. I'm using anchor tag to achieve this. I want to change content of two separate divs at same time. One div holds iframe and other video description.
So far I've managed to make one of my divs change it's content, but not the other. Is there a way to make content of both divs change when I click on anchor tag ?
My code. HTML:
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div id='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div id='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div id='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div id='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div id='zero'>
<p>This text needs to change. Video description</p>
</div>
<div id='one' style="display: none">
<p>This is my video description</p>
</div>
</div>
</div>
</div>
JS:
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show('slow').siblings("div").hide('slow');
});
Also a followup question can I make this toggleable (I've tried adding toggle() at the end of my line, but it just made everything worse), so when I click on anchor tag again it returns original image ?
Here is the codepen so you can better understand my problem : https://codepen.io/Karadjordje/pen/ybRyyo?editors=1010

The crux of your problem is that IDs must be unique. If you have multiple of the same ID then it will never work as expected. I switched things to classes and it's working as you expected.
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("."+target).show('slow').siblings("div").hide('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div class='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div class='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div class='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div class='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div class='zero'>
<p>This text needs to change. Video description</p>
</div>
<div class='one' style="display: none">
<p>This is my video description</p>
</div>
<div class='two' style="display: none">
<p>Two!</p>
</div>
<div class='three' style="display: none">
<p>Three!</p>
</div>
</div>
</div>
</div>

Instead of having multiple divs for each description, use one div and change the content based on rel value. store the description inside an object and use rel value to get the description.
// store your description in here
// on click the anchor tag get the rel value and display description
// like desc[relvalue]
var desc = {'one': 'no man no cry jimmy sax', 'two': 'Pendulum - hold on', 'three': 'Paul Van Dyk'};
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show('slow').siblings("div").hide('slow');
$('#desc p').html(desc[$(this).attr('rel')])
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 class='text-center'>Left Side</h2>
<ul>
<li><a class='myTag' href="#" rel="one">One</a></li>
<li><a class='myTag' href="#" rel="two">Two</a></li>
<li><a class='myTag' href="#" rel="three">Three</a></li>
</ul>
</div>
<div class="col-md-6">
<h2 class='text-center'>Right Side</h2>
<div id='zero'>
<img src="https://img.clipartfest.com/d28d6e716da993963c5b8b871f944141_the-golden-goose-01-golden-goose-clipart_295-230.jpeg" alt="" />
</div>
<div id='one' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/89_KXT5ztTU">
</iframe>
</div>
<div id='two' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/XlvZdsO5sIg">
</iframe>
</div>
<div id='three' style="display: none">
<iframe width="200" height="200" src="https://www.youtube.com/embed/uVoc4AzBX70">
</iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h2>Lower container</h2>
<div id='desc'>
<p>This text needs to change. Video description</p>
</div>
</div>
</div>
</div>

Change id to class...
Instead of id="one" put class="one", and in the jquery put:
$('.myTag').on('click', function(){
var target = $(this).attr('rel');
$("."+target).show('slow').siblings("div").hide('slow');
});

jquery animate scrollTop not working on FireFox or IE

I have some jQuery code that scrolls to the top of an element's parent on click event. This code works great, however, when testing on IE and Firefox, the scroll does not work. Does anyone know of a solution for this functionality to work with IE and Firefox?
$(".character-img").click(function(){
$('body').animate({scrollTop: $(this).parent().offset().top});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>
<div class="character">
<img class="character-img" src="https://unsplash.it/200/300" />
<div class="content">
</div>
</div>

It's a known problem, Firefox will only accept scrollTop when both body and html are declared.
$('html,body').animate({scrollTop: $(this).parent().offset().top});
is the correct way to write this.
See Animate scrollTop not working in firefox

js css slider tutorial issue

I've been trying my hand at a js slider tutorial and have been trying to get the slider to appear without having to click on one of the links (paris and milan etc).
So page opens, there's the slider.
I've tried having the div of the slider thumb container on the page without having
<ul id="fp_galleryList" class="fp_galleryList">
<li>Paris</li>
<li>New York</li>
</ul>
but it just shows up blank.
I'd really appreciate a nudge in the right direction.
Here's the tutorial for reference:link
Jsfiddle #pete fixed the fiddle
I'm sorry my fiddle doesn't work but my code is there. (First time using Jsfiddle and Stackoverflow so please be nice ;))
<div id="fp_gallery" class="fp_gallery">
<ul id="fp_galleryList" class="fp_galleryList">
<li>Paris</li>
<li>New York</li>
</ul>
<div id="fp_thumbContainer">
<div id="fp_thumbScroller">
<div class="container">
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" />
</div>
</div>
<div class="content">
<div>
<img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="fp_scrollWrapper" class="fp_scrollWrapper">
<span id="fp_prev_thumb" class="fp_prev_thumb"></span>
<div id="slider" class="slider"></div>
<span id="fp_next_thumb" class="fp_next_thumb"></span>
</div>
<div id="fp_overlay" class="fp_overlay"></div>
<div id="fp_loading" class="fp_loading"></div>
<div id="fp_next" class="fp_next"></div>
<div id="fp_prev" class="fp_prev"></div>
<div id="fp_close" class="fp_close">Close preview</div>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">

Metroui with Javascript

i have just started working with javascript.i was searching a lot on using metroui.org.ua i am not able to consume the .js files in my html.Am missing some configuration ? any help would be appreciated. including my html file as well
<head>
<link rel="stylesheet" href="../css/modern.css" />
<script src="http://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1");
</script>
<script type="text/javascript" src="../js/tile-slider.js"></script>
</head>
<html>
<div class="tile image-slider" data-role="image-slider">
<div class="tile-content">
<img src="../img/AngryBirds.jpg"/>
</div>
<div class="tile-content">
<img src="../img/CutTheRope.jpg"/>
</div>
</div>

The issue Might lie with the Jquery Support For winJS
Please Go through the link
Jquery for winjS
The version you are using might not be compatible with winJS. You might need to do some modifications. Please let me know if it worked or not.
Also try spending time reading this see if it helps
jquery winjs
Here's a code sample that I tested. and the slider is working fine. Copy paste it in a note pad and save as an html. Then run. From the online api it is consuming the code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="description" content="Modern UI CSS">
<meta name="author" content="Sergey Pimenov">
<meta name="keywords" content="windows 8, modern style, modern ui, style, modern, css, framework">
<link href="http://metroui.org.ua/css/modern.css" rel="stylesheet">
<link href="http://metroui.org.ua/css/theme-dark.css" rel="stylesheet">
<link href="http://metroui.org.ua/css/modern-responsive.css" rel="stylesheet">
<script src="http://metroui.org.ua/js/assets/jquery-1.8.2.min.js"></script>
<script src="http://metroui.org.ua/js/assets/google-analytics.js"></script>
<script src="http://metroui.org.ua/js/assets/jquery.mousewheel.min.js"></script>
<script src="http://metroui.org.ua/js/assets/github.info.js"></script>
<script src="http://metroui.org.ua/js/modern/tile-slider.js"></script>
<script src="http://metroui.org.ua/js/modern/start-menu.js"></script>
<script src="http://metroui.org.ua/js/modern/tile-drag.js"></script>
<title>Modern UI CSS</title>
<style>
body {
background: #1d1d1d;
}
</style>
</head>
<body class="metrouicss">
<div class="page secondary fixed-header">
<div class="page-header ">
<div class="page-header-content">
<div class="user-login">
<a href="http://metroui.org.ua/#">
<div class="name">
<span class="first-name">Sergey</span>
<span class="last-name">Pimenov</span>
</div>
<div class="avatar">
<!--<img src="http://metroui.org.ua/images/myface.jpg"/>-->
<i class="icon-user fg-color-white"></i>
</div>
</a>
</div>
<h1 class="fg-color-white">Start</h1>
</div>
</div>
<div class="page-region">
<div class="page-region-content tiles">
<div class="tile-group tile-drag">
<div class="tile icon">
<div class="tile-content">
<i class="icon-calculate"></i>
</div>
<div class="brand">
<span class="name">Calculator</span>
</div>
</div>
<a target="_blank" id="qq" href="http://metroui.org.ua//" onclick="console.log('clicked')" class="tile image outline-color-green">
<div class="tile-content">
<img src="http://metroui.org.ua/images/myface.jpg" alt="">
</div>
</a>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/Mail128.png"/>
</div>
<div class="brand">
<div class="badge">10</div>
<div class="name">Mail</div>
</div>
</div>
<div class="tile bg-color-orangeDark icon">
<b class="check"></b>
<div class="tile-content">
<img src="http://metroui.org.ua/images/Video128.png" alt="" />
</div>
<div class="brand">
<span class="name">Video</span>
</div>
</div>
<div class="tile double image">
<div class="tile-content">
<img src="http://metroui.org.ua/images/5.jpg" alt="" />
</div>
<div class="brand">
<span class="name">Pictures</span>
<div class="badge bg-color-orange">5</div>
</div>
</div>
<div class="tile bg-color-green icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/Market128.png"/>
</div>
<div class="brand">
<span class="name">Store</span>
<span class="badge">6</span>
</div>
</div>
<div class="tile bg-color-red icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/Music128.png" alt="" />
</div>
<div class="brand">
<span class="name">Music</span>
</div>
</div>
<div class="tile double bg-color-blueDark">
<div class="tile-content">
<img src="http://metroui.org.ua/images/michael.jpg" class="place-left"/>
<h3 style="margin-bottom: 5px;">michael_angiulo</h3>
<p>
I just saw Thor last night. It was awesome! I think you'd love it.
</p>
<h5>RT #julie_green</h5>
</div>
<div class="brand">
<span class="name">Tweet#rama</span>
</div>
</div>
<div class="tile bg-color-darken icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/YouTube128.png" alt="" />
</div>
<div class="brand">
<span class="name">YouTube</span>
</div>
</div>
<div class="tile double bg-color-green" data-role="tile-slider" data-param-period="3000">
<div class="tile-content">
<h2>mattberg#live.com</h2>
<h5>Re: Wedding Annoucement!</h5>
<p>
Congratulations! I'm really excited to celebrate with you all. Thanks for...
</p>
</div>
<div class="tile-content">
<h2>tina#live.com</h2>
<h5>Re: Wedding Annoucement!</h5>
<p>
Huh! Waw!!! I'm really excited to celebrate with you all. Thanks for...
</p>
</div>
<div class="brand">
<div class="badge">12</div>
<img class="icon" src="http://metroui.org.ua/images/Mail128.png"/>
</div>
</div>
<div class="tile double image-slider" data-role="tile-slider" data-param-period="5000" data-param-direction="left">
<div class="tile-content">
<img src="http://metroui.org.ua/images/1.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/2.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/3.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/4.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/5.jpg" alt="">
</div>
</div>
</div>
<div class="tile-group tile-drag">
<div class="tile image outline-color-green">
<div class="tile-content">
<img src="http://metroui.org.ua/images/myface.jpg" alt="">
</div>
</div>
</div>
<div class="tile-group tile-drag">
<div class="tile bg-color-blue icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/InternetExplorer128.png"/>
</div>
<div class="brand">
<span class="name">Internet Explorer</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/excel2013icon.png"/>
</div>
<div class="brand">
<span class="name">Excel 2013</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/word2013icon.png"/>
</div>
<div class="brand">
<span class="name">Word 2013</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/onenote2013icon.png"/>
</div>
<div class="brand">
<span class="name">OneNote 2013</span>
</div>
</div>
<div class="tile double image-set">
<div class="tile-content">
<img src="http://metroui.org.ua/images/1.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/2.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/3.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/4.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/5.jpg" alt="">
</div>
<div class="brand">
<span class="name">Photos</span>
</div>
</div>
</div>
<div class="tile-group">
<div class="tile double image">
<div class="tile-content">
<img src="http://metroui.org.ua/images/4.jpg" alt="" />
</div>
<div class="brand bg-color-orange">
<img class="icon" src="http://metroui.org.ua/images/Rss128.png"/>
<p class="text">This is a desert eagle. He is very hungry and angry bird.</p>
<div class="badge">10</div>
</div>
</div>
<div class="tile bg-color-blue icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/InternetExplorer128.png"/>
</div>
<div class="brand">
<span class="name">Internet Explorer</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/excel2013icon.png"/>
</div>
<div class="brand">
<span class="name">Excel 2013</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/word2013icon.png"/>
</div>
<div class="brand">
<span class="name">Word 2013</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/onenote2013icon.png"/>
</div>
<div class="brand">
<span class="name">OneNote 2013</span>
</div>
</div>
</div>
<div class="tile-group tile-drag">
<div class="tile double image">
<div class="tile-content">
<img src="http://metroui.org.ua/images/4.jpg" alt="" />
</div>
<div class="brand bg-color-orange">
<img class="icon" src="http://metroui.org.ua/images/Rss128.png"/>
<p class="text">This is a desert eagle. He is very hungry and angry bird.</p>
<div class="badge">10</div>
</div>
</div>
<div class="tile bg-color-blue icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/InternetExplorer128.png"/>
</div>
<div class="brand">
<span class="name">Internet Explorer</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/excel2013icon.png"/>
</div>
<div class="brand">
<span class="name">Excel 2013</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/word2013icon.png"/>
</div>
<div class="brand">
<span class="name">Word 2013</span>
</div>
</div>
<div class="tile icon">
<div class="tile-content">
<img src="http://metroui.org.ua/images/onenote2013icon.png"/>
</div>
<div class="brand">
<span class="name">OneNote 2013</span>
</div>
</div>
</div>
<div class="tile-group">
<div class="tile quadro double-vertical image-set">
<div class="tile-content">
<img src="http://metroui.org.ua/images/1.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/2.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/3.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/4.jpg" alt="">
</div>
<div class="tile-content">
<img src="http://metroui.org.ua/images/5.jpg" alt="">
</div>
<div class="brand">
<span class="name">Photos</span>
</div>
</div>
</div>
</div>
</div>
</div>
<a href='http://hit.ua/?x=19154' target='_blank'>
<script language="javascript" type="text/javascript"><!--
Cd=document;Cr="&"+Math.random();Cp="&s=1";
Cd.cookie="b=b";if(Cd.cookie)Cp+="&c=1";
Cp+="&t="+(new Date()).getTimezoneOffset();
if(self!=top)Cp+="&f=1";
//--></script>
<script language="javascript1.1" type="text/javascript"><!--
if(navigator.javaEnabled())Cp+="&j=1";
//--></script>
<script language="javascript1.2" type="text/javascript"><!--
if(typeof(screen)!='undefined')Cp+="&w="+screen.width+"&h="+
screen.height+"&d="+(screen.colorDepth?screen.colorDepth:screen.pixelDepth);
//--></script>
<script language="javascript" type="text/javascript"><!--
Cd.write("<img src='http://c.hit.ua/hit?i=19154&g=0&x=2"+Cp+Cr+
"&r="+escape(Cd.referrer)+"&u="+escape(window.location.href)+
"' border='0' wi"+"dth='1' he"+"ight='1'/>");
//--></script>
<noscript>
<img src='http://c.hit.ua/hit?i=19154&g=0&x=2' border='0'/>
</noscript></a>
<!-- / hit.ua -->
</body>
</html>

The question isn't clear at all..
If I understood right, your problem may be that the row:
<script type="text/javascript" src="../js/tile-slider.js"></script>
is in the head tag. Try moving it to just behind the end of body tag. Try moving every script that is not working to there. Some things in javascript won't work if the script is in the wrong place- that's because if the script is in the beginning, it's read before the html is read. If you're trying to change something in the html, for example, it won't do that if it comes before that html row. If it doesn't work please add the script source.

Your html tag is in the wrong place - it should look something like this:
<!DOCTYPE html>
<html>
<head>
<!-- script and link tags go here -->
</head>
<body>
<!-- div and img tags go here -->
</body>
</html>

In case all you want is to show flipping tiles, you could use the jquery animate function as follows:
// hides the given tile, and calls the callback.
this._hideTile = function(tile, callback){
tile.animate({height:0});
}
// shows the given tile.
this._showTile= function(tile){
tile.animate({height:150});
}
Check out the full logic in this jsFiddle.

Categories

Resources