i am a newb to jquery
i have a metro (horizontal layout)
<pre>
<section id="content" >
<section class="clearfix section" id="sharing-experience" style="margin-top: 100px; height: 525px;">
<h3 class="block-title">first</h3>
<div class="tile turquoise w3 h2 icon-fadeoutscaleup">
<a class="link" href="#">
<i class="fa-bookmark"></i>
<p class="title-right">one</p>
<p class="title">1</p>
</a>
</div>
<div class="tile brown w3 h2 icon-fadeoutscaleup">
<a class="link" href="#">
<i class="fa-clipboard"></i>
<p class="title-right">two</p>
<p class="title">2</p>
</a>
</div>
</section>
<section class="clearfix section" id="sharing-experience" style="margin-top: 100px; height: 525px;">
<h3 class="block-title">second</h3>
<div class="tile turquoise w3 h2 icon-fadeoutscaleup">
<a class="link" href="#">
<i class="fa-bookmark"></i>
<p class="title-right">one</p>
<p class="title">1</p>
</a>
</div>
<div class="tile brown w3 h2 icon-fadeoutscaleup">
<a class="link" href="#">
<i class="fa-clipboard"></i>
<p class="title-right">two</p>
<p class="title">2</p>
</a>
</div>
</section>
<section class="clearfix section" id="sharing-experience" style="margin-top: 100px; height: 525px;">
<h3 class="block-title">third</h3>
<div class="tile turquoise w3 h2 icon-fadeoutscaleup">
<a class="link" href="#">
<i class="fa-bookmark"></i>
<p class="title-right">one</p>
<p class="title">1</p>
</a>
</div>
<div class="tile brown w3 h2 icon-fadeoutscaleup">
<a class="link" href="#">
<i class="fa-clipboard"></i>
<p class="title-right">two</p>
<p class="title">2</p>
</a>
</div>
</section>
</section>
</pre>
The page on ready should start from the third section
for that there should be an animation from right to left on the page loads or ready
here is the example
which is been done
if anybody could help!! it will be really great
and here is the link for the metro design
i am using megametro
here is the link for it
http://themes.grozav.com/metromega/
HI i suppose you want to have section 3 in the center of the page when the page loads and the other two sections to the left of it.
If this is what you want, then the following could be done to achieve what you want.
$(document).ready(function(){
window.scrollTo($("#id-of-section-you-want-to-show").offset().left ,$("body").offset().left);
// apply your animations
});
And ya, please do change the id's of your section. Id attribute should be unique since the define a particular dom element in html page.
Related
I am trying to change the source by clicking on the anchor. This is what I have tried so far:
<div class="main">
<a id="popularity" href="#"><div class="banner-part l_banner_efs">
<img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">
<h3 class="banner-header">POPULARITY<br/>MESSAGING</h3>
<p class="banner-text">Dynamic audience size and sales counters</p>
</a></div>
<div class="phone_banner Column">
<img class="img_main" src="img/phones/1.png" alt="screenshot from iOS">
</div>
</div>
JS:
$(document).ready(function() {
$("#popularity").click(function() {
$('.img_main').attr('src', 'img/phones/2.png');
})
});
Nothing happens when I click on my link.
It isn't working as your HTML structure is invalid. You have an additional closing </div> tag at the very bottom. Remove this and it will work for you.
See working example below:
$(document).ready(function() {
$("#popularity").click(function() {
$('.img_main').attr('src', 'https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="popularity" href="#">
<div class="banner-part l_banner_efs">
<img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">
<h3 class="banner-header">POPULARITY<br/>MESSAGING</h3>
<p class="banner-text">Dynamic audience size and sales counters</p>
</div>
</a>
</div>
<div class="phone_banner Column">
<img class="img_main" src="img/phones/1.png" alt="screenshot from iOS">
</div>
<!-- </div> <--- Remove this -->
You just need to check closing tag of </div>
<div class="main">
<a id="popularity" href="#">
<div class="banner-part l_banner_efs">
<img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">
<h3 class="banner-header">POPULARITY<br/>MESSAGING</h3>
<p class="banner-text">Dynamic audience size and sales counters</p>
</div>
</a>
<div class="phone_banner Column">
<img class="img_main" src="img/phones/1.png" alt="screenshot from iOS">
</div>
</div>
$("a#popularity").on( "click", function() {
$('.img_main').attr('src', 'https://images.unsplash.com/photo-1542256015-e6bb100b3f4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=61c4ef1293dde4a044a0a3efa825e17e&auto=format&fit=crop&w=500&q=60');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="popularity" href="#"><div class="banner-part l_banner_efs">
<img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">
<h3 class="banner-header">POPULARITY<br/>MESSAGING</h3>
<p class="banner-text">Dynamic audience size and sales counters</p>
</a>
</div>
<div class="phone_banner Column">
<img class="img_main" src="https://images.unsplash.com/photo-1542223616-740d5dff7f56?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1887f4d330d6bede705000e6ed7ba193&auto=format&fit=crop&w=500&q=60" alt="screenshot from iOS">
</div>
As everybody is pointing out, the invalid HTML structure is what causes this issue. Normally, browsers fix up bad HTML as best they can. In this case, you end up with HTML like:
<div class="main">
<a id="popularity" href="#"></a><div class="banner-part l_banner_efs"><a id="popularity" href="#">
<img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">
<h3 class="banner-header">POPULARITY<br>MESSAGING</h3>
<p class="banner-text">Dynamic audience size and sales counters</p>
</a></div>
<div class="phone_banner Column">
<img class="img_main" src="img/phones/1.png" alt="screenshot from iOS">
</div>
</div>
Note that the anchor is split into two elements, both with the same id. ids must be unique. When they aren't, and you select by id, you usually only get the first element with that id. Your javascript, $("#popularity"), selects that first anchor to which you then attach a click handler. But that anchor doesn't contain anything, collapses to nothing, and so can't be normally interacted with. All the clicking the user does happens on the second anchor which doesn't have a click handler associated with it.
Of course, fixing the HTML structure will fix this issue.
There are unbalanced tag in you html. The closing div tag after closing a need to before closing a
like this
</div>
</a>
$(document).ready(function() {
$("#popularity").click(function() {
$('.img_main').attr('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Aspen-PopulusTremuloides-2001-09-27.jpg/220px-Aspen-PopulusTremuloides-2001-09-27.jpg');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<a id="popularity" href="#">
<div class="banner-part l_banner_efs">
<img class="banner-logo" src="img/logos/popularity.png" alt="Popularity">
<h3 class="banner-header">POPULARITY<br/>MESSAGING</h3>
<p class="banner-text">Dynamic audience size and sales counters</p>
</div>
</a>
<div class="phone_banner Column">
<img class="img_main" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Larix_decidua_Aletschwald.jpg/220px-Larix_decidua_Aletschwald.jpg" alt="screenshot from iOS">
</div>
</div>
can someone help me out how to generate multiple cards in HTML without adding separate div for each card? the thing is I want the code length to be shorter so I want to use single that is applicable to shorten the length and generate the cards to display in a HTML page.As I'm new to development I'm not able to solve this problem in spite of many searches.
please see this
<div class="row">
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
<span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample1</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
<span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample2</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<div class="fixed-action-btn click-to-toggle" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">menu</i>
</a>
<ul>
<li><a class="btn-floating red" class="fbtn" href="test.html"><i class="material-icons">home</i></a></li>
<li><a class="btn-floating yellow darken-1" class="fbtn" href="#"><i class="material-icons">work</i></a></li>
<li><a class="btn-floating green" class="fbtn" href="about.html"><i class="material-icons">account_circle</i></a></li>
<li><a class="btn-floating blue" class="fbtn" href="contact.html"><i class="material-icons">speaker_notes</i></a></li>
</ul>
</div>
<div class="clear" style="clear:both; height: 100px;">
</div>
<footer class="ui-footer" style="background:#fafafa; width:100%; position:fixed; z-index:99; clear:both;">
<div class="container">
<p>© Yogesh Singh Choudhary</p>
</div>
</footer>
Thank you
I am using the fancybox to show six pictures in a slide show.But the first image appears twice, and I can't find the reason why. if i click the first image, the image will be appear twise when click previous twise.
$(document).ready(function() {
$(".fancybox").fancybox()
});
<div class="cbp-item item photography lifting">
<center><h3>Before</h3></center><hr><br>
<a rel="gallery" class="fancybox" href="img/slider/reve/Before1.jpg" title="Reverse Engineering">
<div class="cbp-caption-defaultWrap">
<img src="img/slider/reve/Before1.jpg" alt="Crexis">
<a rel="gallery" class="fancybox" href="img/slider/reve/Before2.jpg" title="Before"></a>
<a rel="gallery" class="fancybox" href="img/slider/reve/Before3.jpg" title="Before"></a>
<a rel="gallery" class="fancybox" href="img/slider/reve/Before4.jpg" title="Before"></a>
<a rel="gallery" class="fancybox" href="img/slider/reve/Before5.jpg" title="Before"></a>
<a rel="gallery" class="fancybox" href="img/slider/reve/Before6.jpg" title="Before"></a>
<div class="item_icon">
<p><i class="fa fa-camera-retro"></i></p>
<p>Reverse Engineering</p>
</div> <!-- End of .item_icon -->
</div> <!-- End of .cbp-caption-defaultWrap -->
</a> <!-- End of .fancybox -->
<div class="cbp-caption-activeWrap">
<div class="center-details">
<div class="details">
<h2 class="name">Reverse Engineering</h2>
<p class="tags">Before</p>
</div> <!-- End of .details -->
</div> <!-- End of .center-details -->
</div> <!-- End of .cbp-caption-activeWrap -->
</div> <!-- End of .cbp-item.item.photography.lifting -->
I changed the html, the first a tag was closed in a wrong way so edit your html to be like this.
<div class="cbp-item item photography lifting">
<center> <h3>Before</h3></center><hr><br>
<a rel="gallery" class="fancybox" href="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia18351-1041.jpg?itok=TyivXWrM" title="Reverse Engineering"><img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia18351-1041.jpg?itok=TyivXWrM" alt="Crexis"></a>
<div class="cbp-caption-defaultWrap">
<a rel="gallery" class="fancybox" href="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" title="Before"></a>
<a rel="gallery" class="fancybox" href="https://images.contentful.com/256tjdsmm689/2T0QeKcvR6MSsckuKoYIwS/b57d12107fc5eb635e294ed1c76cbbac/feature-gettyimages.jpg" title="Before"></a>
<a rel="gallery" class="fancybox" href="http://sabiaunite.com/uploads/gallery/12112013-080739AM-2.jpg" title="Before"></a>
<a rel="gallery" class="fancybox" href="https://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" title="Before"></a>
<div class="item_icon">
<p><i class="fa fa-camera-retro"></i></p>
<p>Reverse Engineering</p>
</div>
</div>
<div class="cbp-caption-activeWrap">
<div class="center-details">
<div class="details">
<h2 class="name">
Reverse Engineering
</h2>
<p class="tags">
Before
</p>
</div>
</div>
</div>
</div>
https://jsfiddle.net/IA7medd/zrxL3unp/
I want to make a button or link, that, when clicked will display the next two div (articles) that I have stored in the index. Kind of like the infinite scroll tumblr effect. This as close as I could get. Either doesn't display any of the divs, or displays all of them.
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Title
</h2>
<h3 class="post-subtitle">
Description
</h3>
</a>
<p class="post-meta">Posted by Trevor Healy on September 24, 2014</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Title
</h2>
<h3 class="post-subtitle">
Description
</h3>
</a>
<p class="post-meta">Posted by Trevor Healy on September 18, 2014</p>
</div>
<!-- Pager -->
<ul class="pager">
<li class="next">
Older Posts →
</li>
</ul>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Title
</h2>
<h3 class="post-subtitle">
Description
</h3>
</a>
<p class="post-meta">Posted by Trevor Healy on August 24, 2014</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Title
</h2>
<h3 class="post-subtitle">
Description
</h3>
</a>
<p class="post-meta">Posted by Trevor Healy on July 8, 2014</p>
</div>
<hr>
</div>
</div>
</div>
I have a css file that stores:
.post-preview { display:none; }
and this is the script that I run on the page:
<script>
$(function(){
$(".post-preview").slice(0, 2).show(); // select the first two
$("#load").click(function(e){ // click event for load more
e.preventDefault();
$(".post-preview:hidden").slice(0, 2).show(); // select next two hidden divs and show them
});
});
</script>
the content is correct - the JQuery library was not loaded.
I am making a page with a bunch of items on it with differing headings and text. I want the headings and text to all line up at the same height. Some headings will be 2 lines, some only 1. It needs to also be responsive, so I can't just set a min-height.
(source: iforce.co.nz)
Is it possible to get the h2's and p's to always be the same height? The hacky way I was thinking was padding out the shorter ones with javascript, but that is a last resort.
The HTML is:
<div class="itemContainer" style="width:25.0%;">
<div class="catItemView groupPrimary">
<div class="catItemHeader">
<h3 class="catItemTitle">
Wairamarama-Onewhero Seal Extension
</h3>
</div>
<div class="catItemBody">
<div class="catItemImageBlock">
<span class="catItemImage">
<a href="/index.php/projects/item/46-wairamarama-onewhero-seal-extension" title="Wairamarama-Onewhero Seal Extension">
<img src="/media/k2/items/cache/64d93d666355a43c4a86679a030d35b6_M.jpg" alt="Wairamarama-Onewhero Seal Extension" style="width:359px; height:auto;" />
</a>
</span>
<div class="clr"></div>
</div>
<div class="catItemIntroText">
<p>Evergreen Landcare have been involved in the Wairamarama-Onewhero Seal Extension as a sub-contractor for Heb Construction.</p>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="catItemReadMore">
<a class="k2ReadMore" href="/index.php/projects/item/46-wairamarama-onewhero-seal-extension">Read more...</a>
</div>
<div class="clr"></div>
</div>
This is generated by K2/Joomla! so there isn't much flexibility in it.
This is the page if you want to see it.
You could "fix" the appearance by setting the height of the elements that have variable content to some value that holds the largest. The follwoing CSS does this for the page you linked to:
div.catItemIntroText {
height: 180px;
}
div.catItemHeader h3.catItemTitle {
height: 45px;
}
This only works because you know in advance the height that looks best.
If you were in a position to alter your HTML you could take a fresh approach and use a grid system. Here is an approach that uses Twitter Bootstrap (demo)
<div class="container">
<div class="row">
<div class="span3">
<h2>Wairamarama-Onewhero Seal Extension</h2>
</div>
<div class="span3">
<h2>Te Rapa Pass</h2>
</div>
<div class="span3">
<h2>Stockton Mine</h2>
</div>
<div class="span3">
<h2>State Highway 88 Dunedin Realignment</h2>
</div>
</div>
<div class="row">
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3 ReadMore">
<img src="http://placekitten.com/200/300" />
</div>
</div>
<div class="row">
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
</div>
</div>
By putting each row (of text, images and buttons) on it's own <div.row> the spill over is handled automatically.