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>
Related
Hi I am trying to figure out how to remove a div if the img src is empty.
I've searched on stackoverflow, but most are all jq based. Can someone help in vanilla javascript?
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80"
alt=""
class="imgCard"
color=""
/>
</div>
<div class="swiper-slide">
<img
src=""
alt=""
class="imgCard"
color=""
/>
</div>
</div>
Here how you can do this
const swipers = document.querySelectorAll('.swiper-slide');
swipers.forEach(e => {
const imgSource = e.querySelector('img').getAttribute('src');
if (imgSource.trim() === '') {
e.remove()
}
})
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="" class="imgCard" color="" />
</div>
<div class="swiper-slide">
<img src="" alt="" class="imgCard" color="" />
</div>
</div>
You can get all images which are child of .swiper-slide class and check if their have src attribute different than an empty string like this
let imgs = document.querySelectorAll(".swiper-slide img");
imgs.forEach(item => {
if (item.getAttribute('src') === "") {
item.parentNode.remove();
}
});
<div class="swiper-wrapper ">
<div class="swiper-slide">
<img src="https://images.unsplash.com/photo-1526947425960-945c6e72858f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHByb2R1Y3RzfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="First image alternate text" class="imgCard" color="" />
</div>
<div class="swiper-slide">
<img src="" alt="Second image alternate text" class="imgCard" color="" />
</div>
</div>
I'm trying to make an image puzzle game where there is a 4by4 grid to try to solve a shuffled puzzle. I tried creating a 4by4 grid but had no luck let alone have each element in the array correspond to a puzzle piece on the board. I tried making divs for each image but couldn't figure out a way to display them properly on the board. How do I accomplish a 4by4 grid that can correspond to elements in my array?
Note: I know that my images don't display properly because the files haven't been converted to stack overflow's server, ignore it for now.
var pieces = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,];
function initialize()
{
for( var i = pieces.length; i<16; i++;){}
}
function shuffle()
{
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: radial-gradient(#9D5900, #3D2200);
}
.game-container {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 10px;
margin: 50px;
justify-content: center;
perspective: 500px;
}
.card {
height: 225px;
width: 175px;
}
<!DOCTYPE html>
<html>
<title></title>
<link rel="stylesheet" type="text/css" href="PicturePuzzle.css" />
<script src="PicturePuzzle.js" type="text/javascript"></script>
<head>
<body onload = "initialize()">
<div class="game-container">
<div class="card">
<img src="char1.jpg">
</div>
<div class="card">
<img src ="char2.jpg">
</div>
<div class="card">
<img src ="char3.jpg">
</div>
<div class="card">
<img src="char4.jpg">
</div>
<div class="card">
<img src="char5.jpg">
</div>
<div class="card">
</div>
<img src="char6.jpg">
</div>
<div class="card">
<img src="char7.jpg" >
<div class="card">
<img src="char8.jpg" >
</div>
<div class="card">
<img src="char9.jpg" >
</div>
<div class="card">
<img src="char10.jpg">
</div>
<div class="card">
<img src="char11.jpg">
</div>
<div class="card">
<img src="char12.jpg">
</div>
<div class="card">
<img src="char13.jpg">
</div>
<img src="char14.jpg">
</div>
<div class="card">
<img src="char15.jpg">
</div>
<img src="char16.jpg">
</div>
</div>
<button onclick = "shuffle()">Shuffle</button>
</body>
</head>
</html>
You have HTML errors messing up the grid - there are </div> tags in the wrong places - and missing <div> tags
Correct HTML:
<div class=game-container>
<div class=card>
<img src=char1.jpg>
</div>
<div class=card>
<img src=char2.jpg>
</div>
<div class=card>
<img src=char3.jpg>
</div>
<div class=card>
<img src=char4.jpg>
</div>
<div class=card>
<img src=char5.jpg>
</div>
<div class=card>
<img src=char6.jpg>
</div>
<div class=card>
<img src=char7.jpg>
</div>
<div class=card>
<img src=char8.jpg>
</div>
<div class=card>
<img src=char9.jpg>
</div>
<div class=card>
<img src=char10.jpg>
</div>
<div class=card>
<img src=char11.jpg>
</div>
<div class=card>
<img src=char12.jpg>
</div>
<div class=card>
<img src=char13.jpg>
</div>
<div class=card>
<img src=char14.jpg>
</div>
<div class=card>
<img src=char15.jpg>
</div>
<div class=card>
<img src=char16.jpg>
</div>
</div>
There is a Javascript error - it doesn't affect the grid
There should be no semicolon after the increment expression in loop control statement
Also prefer to use let instead of var
for(let i=pieces.length; i<16; i++) {}
I know it might be a little bit dumm but i am really struggling with simple things like the following problem. Here is an example of the code that i have. The problem will be explained after the code. So here it is:
<div class="wrapper">
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
</div>
What i would like to do, is to keep every first item (image_item) of every div with the class "image" and remove the rest. Any idea how to achieve that? So far i got this but it removes everything accept the first one on the first div.
$('.first_only .immo_image').not(':first').remove();
I also tried to iterate through each element with the following code:
$('. image').each(function () {
$('.image_item').not(':first').remove();
});
But it does the same with the other example. It removes everything except the first image on the first div.
Any ideas?
Best regards
You can use $(this).find(".image_item:not(:first)").remove(); to remove all except the first image.
$(".image").each(function() {
$(this).find(".image_item:not(:first)").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
<div class="image_item">
<img src="someSource">
</div>
</div>
</div>
</div>
For your particular document tree, this should work:
$('.image').each(function () {
$(this).find('.image-item').slice(1).remove();
});
For each .image, find all .image-item inside it and remove all but the first one (in document order).
There's no need to explicitly loop through the .image elements. You can use a single selector incorporating the :nth-child selector (negated with :not) to remove() all the elements you require. Something like this:
$('.image .image_item:not(:nth-child(1))').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource"> 1-1
</div>
<div class="image_item">
<img src="someSource"> 1-2
</div>
</div>
</div>
<div class="image">
<div class="columns">
<div class="image_item">
<img src="someSource"> 2-1
</div>
<div class="image_item">
<img src="someSource"> 2-2
</div>
<div class="image_item">
<img src="someSource"> 2-3
</div>
</div>
</div>
</div>
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 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.