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.
Related
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
In working with a code chunk such as the following, I am attempting to add a unique class name to each instance of the class "duplicated-class" which is on the same element as the class "affiliate-logo".
Important notes:
"duplicated-class" represents a dynamic variable, that could be anything.
The desired outcome is to append the duplicated classes with a numeral ('.class-1', '.class-2', '.class-3', etc....
Here is an example the code structure:
<div id="integrations">
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class"><img src="" alt=""></div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class"><img src="" alt=""></div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo different-class"><img src="" alt=""></div>
</div>
</div>
</div>
</div>
</div>
The post-item group is being generated from a COS-listing with the 'duplicate-class' being pulled from the {{name}} value that must allow for duplicate value entries.
While I can find methods for producing class lists for direct descendants of the wrapping ID, I cannot seem to find (or figure out) anything that produces the result of finding the "duplicate-class" while nested more deeply in the produced structure.
My initial thoughts are to:
Identify the post-item groups
Find the '.affiliate-logo' class within each post-item group
Identify the second class next to '.affiliate-logo' (in this example: .duplicate-class) and assign it to a variable (var = adjacentClass) <-- this is where I get lost on how to accomplish this check.
Check to see if (adjacentClass) matches any other (adjacentClass) from other post-item groups.
Use counter to act as unique identifier addition (var i = i)
if(adjacentClass === adjacentClass){ $(".duplicate-class').replaceClass('adjacentClass' + i) } else {}
(I would actually try write that logic out in javascript, if I could figure out step 3.)
Any assistance that can be offered for this issue would be much appreciated.
Articles I have referenced in attempting to find a solution:
How find nested div with same class name in jquery?
How do I access the list of classnames using javascript/jQuery?
jquery select class inside parent div
Target the 2nd instance of a CSS Class
** Edited to fix a terminology conflict
UPDATE 2
In Snippet 2 we have used .each() twice. Once to iterate every div.affiliate-logo and once for the second class each div.affiliate-logo has. A for loop filters out duplicates that are stored in an array. The hardest part was what OP had trouble was with getting the second class. This is how:
$(this).prop('classList');
In plain JavaScript, classList is a property when it's used without any .add, .remove, etc. it will return an array of classNames (in the comments of Snippet 2, any reference to a string in this array will be "classString").
Review Snippet 2 in Full page mode. Details are commented in Snippet 2.
UPDATE 1
the first 'duplicate-class' becomes 'duplicate-class-1', the second becomes 'duplicate-class-2'
Not sure what you are trying to do. I think you are thinking that classes are like DOM objects as elements are. Review the Snippet and let me know if this is what you wanted or not.
SNIPPET 1
$('.duplicate-class').each(function(idx, obj) {
var unique = 'duplicate-class' + (idx + 1);
$(this).addClass(unique)
$(this).text('this is ' + unique); //This is just to show it works
});
div {
border: 1px solid black;
height: 40px;
width: 200px;
padding: 10px;
color: white;
background: rgba(0, 0, 0, .3);
}
.affiliate-logo {
border: 2px dashed red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="integrations">
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo different-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
SNIPPET 2
// .each() .affiliate-logo do this...
$('.affiliate-logo').each(function(idx, obj) {
/* Get the classList .prop()erty and store it
|| in a var called list. list is now an array
|| of classes that belong to this particular
|| .affiliate-logo.
*/
var list = $(this).prop('classList');
// Store the second classString in a var called second
var second = list[1];
/* Create an array with the classString of 'affiliate-
|| logo' because we already know that it will be a
|| duplicate. Call this array dupes.
*/
var dupes = ['affiliate-logo'];
/* for every classString that's in dupes array
|| compare it to the value of second. If there's
|| a match bust out of this loop and go on to the
|| next .affiliate-logo.
*/
for (let a = 0; a < dupes.length; a++) {
if (second === dupes[a]) {
return;
}
}
/* Since there were no matches, we continue.
|| Push second in the dupes array so if ever found
|| again, second will be rejected by the previous
|| for loop.
*/
dupes.push(second);
/* Concat second with a dot so it'll pass as a class
|| selector then store it in a var called klass.
*/
var klass = '.' + second;
// each() klass will...
$(klass).each(function(index, item) {
/* concat second + (current)index as a string
|| then addClass() that string to the current
|| div.affiliate-logo.{{klass}}
*/
$(item).addClass(second + index);
/* insert text that shows it's new class. The
|| new unique class can be verified by F12.
*/
$(item).text('This is ' + second + index);
});
});
div {
border: 1px solid black;
height: 40px;
width: 200px;
padding: 10px;
color: white;
background: rgba(0, 0, 0, .3);
}
.affiliate-logo {
border: 2px dashed red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="integrations">
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo different-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo o-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo klass-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo a-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo dupe-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo bass-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo wrong-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo logo-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo long-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
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">
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>
I am hoping someone can help me with this issue ...
I am wanting each of the 6 images to be it's own Gallery, and for the Life of me am Beyond Lost!
Here is the JS code:
$(function(){
// lightbox image
$(".lightbox-image").append("<span></span>");
$(".lightbox-image").hover(function(){
$(this).find("img").stop().animate({opacity:0.5}, "normal")
}, function(){
$(this).find("img").stop().animate({opacity:1}, "normal")
});
});
Here is the HTML:
<div class="pad_left1">
<div class="wrapper pad_bot1">
<div class="cols"> <img src="images/page3_img1.png" alt="">
<p><strong class="font1">Company Logos</strong>???enter text here???<br><br>
</p>
</div>
<div class="cols pad_left1"> <img src="images/page3_img2.png" alt="">
<p><strong class="font1">Business Cards</strong>???enter text here???<br>
</p>
</div>
</div>
<div class="wrapper pad_bot1">
<div class="cols"> <img src="images/page3_img3.png" alt="">
<p><strong class="font1">Photography/Photo Edits</strong>???enter text here???<br><br>
</p>
</div>
<div class="cols pad_left1"> <img src="images/page3_img4.png" alt="">
<p><strong class="font1">Band Logos/Album Covers</strong>???enter text here???<br>
</p>
</div>
</div>
<div class="wrapper pad_bot1">
<div class="cols"> <img src="images/page3_img5.png" alt="">
<p><strong class="font1">Random Designs</strong>???enter text here???<br>
</p>
</div>
<div class="cols pad_left1"> <img src="images/page3_img6.png" alt="">
<p><strong class="font1">Websites</strong>???enter text here???<br>
</p>
</div>
</div>
</div>
It's simple try to do it this way if you need a set of gallery
<div>
image #1
image #2
image #3
</div>
<div>
image #4
image #5
image #6
</div>