I am working on an html page where i have div element and also a inner div element. In the inner div element there is a image element. The main and inner div are 2 in numbers.
<div class="owl-stage-outer">
<div class="owl-item" style="width: 1903px;"><div class="header-single-slider">
<figure>
<img src="assets/img/sliders/slider01.jpg" alt="">
<figcaption>
<div class="content">
<div class="container inner-content text-left">
<h1 style="display: block;" class="fadeInUp animated">We Build Your<br><span>Business</span> IDEA</h1>
<p style="display: block;" class="fadeInDown animated">There are many variations of passages of Lorem Ipsum available but the majority have suffered injected humour dummy now.</p>
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</figcaption>
</figure>
</div></div>
<div class="owl-item active" style="width: 1903px;"><div class="header-single-slider">
<figure>
<img src="assets/img/sliders/slider02.jpg" alt="">
<figcaption>
<div class="content">
<div class="container inner-content text-left">
<h1 style="display: block;" class="fadeInUp animated">We Build Your<br><span>Business</span> IDEA</h1>
<p style="display: block;" class="fadeInDown animated">There are many variations of passages of Lorem Ipsum available but the majority have suffered injected humour dummy now.</p>
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</figcaption>
</figure>
</div></div>
</div>
Here the main div whose class is 'owl-item' is used 2 times and the inner div whose class is 'header-single-slider' is also used 2 times. When the program runs The main div whose class is 'owl-item', its class changes to 'owl-item acitve' means this class is active now and second div class remain as 'owl-item'. after some seconds the second div will becomes active and its class becomes'owl-item active' and first will remain inactive and its class will be 'owl-item'
I want to find the image src of that div whose class is 'owl-item active'. For this i used the following query:
alert($('.owl-item active').children('div').children("img").attr('src'));
But it is showing alert message as 'Undefined'. How to solve this?
You didn't select your active owl-item correctly.
You can simply use
$('.owl-item.active>div>figure>img').attr('src')
If you're sure you only have one img in your div, just use '.owl-item.active img' instead.
console.log($('.owl-item.active>div>figure>img').attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="owl-stage-outer">
<div class="owl-item" style="width: 1903px;">
<div class="header-single-slider">
<figure>
<img src="assets/img/sliders/slider01.jpg" alt="">
<figcaption>
<div class="content">
<div class="container inner-content text-left">
<h1 style="display: block;" class="fadeInUp animated">We Build Your<br><span>Business</span> IDEA</h1>
<p style="display: block;" class="fadeInDown animated">There are many variations of passages of Lorem Ipsum available but the majority have suffered injected humour dummy now.</p>
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
<div class="owl-item active" style="width: 1903px;">
<div class="header-single-slider">
<figure>
<img src="assets/img/sliders/slider02.jpg" alt="">
<figcaption>
<div class="content">
<div class="container inner-content text-left">
<h1 style="display: block;" class="fadeInUp animated">We Build Your<br><span>Business</span> IDEA</h1>
<p style="display: block;" class="fadeInDown animated">There are many variations of passages of Lorem Ipsum available but the majority have suffered injected humour dummy now.</p>
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
You forgot a . before active
$('.owl-item.active img').attr('src')
You can use find method.
console.log($('.owl-item.active').find('figure>img').attr('src'));
Related
I have an angular web page like this
this is the picture
I have no problem in web version but I want to display in another way in mobile version like title picture and text
this is an example of my code
<div class="our-company-history section-space--ptb_100">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="faq-custom-col">
<div class="section-title-wrap">
<h3 class="heading"><span class="text-color-primary">Développement Logiciel</span></h3>
<h6 class="text" [innerHtml]="cont.developement"></h6>
<p [innerHtml]="cont.developement_suite" class="text mt-30"></p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="rv-video-section">
<div class="ht-banner-01 ">
<img class="img-fluid border-radus-5 animation_images one wow fadeInDown" src="assets/images/banners/logiciel4.png" alt="">
</div>
<div class="ht-banner-02">
<img width="188" height="115" class="img-fluid border-radus-5 animation_images two wow fadeInDown" src="assets/images/banners/logiciel3.png" alt="">
</div>
<div class="main-video-box video-popup">
<a class="video-link mt-30">
<div class="single-popup-wrap">
<img class="img-fluid border-radus-5" src="assets/images/banners/logicielb.png" alt="">
<div class="ht-popup-video video-button">
</div>
</div>
</a>
</div>
<div class="ht-banner-03">
<img width="188" height="115" class="img-fluid border-radus-5 animation_images three wow fadeInDown" src="assets/images/banners/logiciel1.png" alt="">
</div>
<div class="ht-banner-04">
<img width="190" height="190" class="img-fluid border-radus-5 animation_images four wow fadeInDown" src="assets/images/banners/logiciel2.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
I looked a lot for a method to display mode in another way in mobile version I need some help and thank you
With the given problem, I think its better if you use media queries to hide/show elements in browser. Further you may need to add few lines of html to change layout.
Or you can follow bootstrap grid layout / flex box to give it basic responsiveness.
there are a lot of references out there to solve this issue.
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>
I have seen several similar questions, but can't find a solution that works well for me. I need the collapsed content outside of the header container. My basic set up is like so
<div id="buttonRow">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row collapse-row" id="rowOne">
<div class="col-sm-12 col-custom vertical-align">
<div id="about-text">
<p>Header One</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 collapse-row" id="rowTwo">
<div class="row">
<div class="col-sm-12 col-custom vertical-align">
<div id="about-text">
<p>Header Two</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 collapse-row" id="rowThree">
<div class="row">
<div class="col-sm-12 col-custom vertical-align">
<div id="about-text">
<p>Header Three</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 d-none" id="ContentOne">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-md-12 d-none" id="ContentTwo">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-md-12 d-none" id="ContentThree">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
So if Header One is clicked, contentOne should collapse etc. I have not done much with the Javascript yet, just obtain the id
$('.collapse-row').click(function() {
var id = $(this).attr("id");
alert(id)
});
What I want to try and avoid is writing separate code for each collapse. I wanted to somehow use the id to make the correct content collapse. What would be the best way to achieve this?
Additionally, I also have the same headers within the navigation at the top of the page. When these ones are clicked, it should scroll down and collapse the appropriate one. So I have to somehow fit this in as well.
I have created a demo JSFiddle with the basic structure.
Any advice would be appreciated.
Thanks
One way to achieve this would be through the use of data-* attributes on the header elements. The data attributes will hold the target element id. A small tweak to the JS allows the d-none class to be toggled on the rows. Updated fiddle
Update HTML. Notice the data-target-id attribute.
<div class="row collapse-row" data-target-id="ContentOne">
<div class="col-sm-12 col-custom vertical-align">
<div id="about-text">
<p>Header One</p>
</div>
</div>
</div>
Update JS
$('.collapse-row').click(function() {
var id = $(this).data("target-id");
$("#" + id).toggleClass("d-none");
});
i am having a problem first this is the code that i am working on
<section id="portfolio">
<div class="container">
<div class="center">
<h2>Products</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<ul class="portfolio-filter text-center">
<li><a class="btn btn-default " href="#" data-filter="*">All Works</a></li>
<li><a class="btn btn-default" href="#" data-filter=".bootstrap">Creative</a></li>
<li><a class="btn btn-default" href="#" data-filter=".html">Photography</a></li>
<li><a class="btn btn-default active" href="#" data-filter=".wordpress">Web Development</a></li>
</ul><!--/#portfolio-filter-->
<div class="row">
<div class="portfolio-items">
<div class="portfolio-item apps col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item1.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item1.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item joomla bootstrap col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item2.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item2.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item bootstrap wordpress col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item3.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item3.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item joomla wordpress apps col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item4.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item4.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item joomla html bootstrap col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item5.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item5.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item wordpress html apps col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item6.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item6.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item wordpress html col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item7.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item7.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
<div class="portfolio-item wordpress html bootstrap col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item8.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3>Business theme</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
<a class="preview" href="images/portfolio/full/item8.png" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div><!--/.portfolio-item-->
</div>
</div>
</div>
</section><!--/#portfolio-item-->
as u can see it's a portfolio page and it's has random images and as u click on of the data-filter it will show u the images of that section ,but i am having a problem that when i reload the page ,all the images jump into the page and how many images i put all of them will appear ,and that's not good ,what i want to do is that for example if i reload the page only and automatically the "Creative images" tab images only appear ,i am strugling on how to do that this is my javascript code
// portfolio filter
$(window).load(function(){'use strict';
var $portfolio_selectors = $('.portfolio-filter >li>a');
var $portfolio = $('.portfolio-items');
$portfolio.isotope({
itemSelector : '.portfolio-item',
layoutMode : 'fitRows'
});
$portfolio_selectors.on('click', function(){
$portfolio_selectors.removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$portfolio.isotope({ filter: selector });
return false;
});
});
any reply it will be very helpful thanks in advance.
Demo
filter: '.bootstrap' in the initialization will hide all other div's. filter option can be used while initializing isotope.
// portfolio filter
var $portfolio_selectors = $('.portfolio-filter >li>a');
var $portfolio = $('.portfolio-items');
$portfolio.isotope({
itemSelector: '.portfolio-item',
layoutMode: 'fitRows',
filter: '.bootstrap'
});
$portfolio_selectors.on('click', function () {
$portfolio_selectors.removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');
$portfolio.isotope({
filter: selector
});
return false;
});
I have bunch of rows each containing a fixed number of columns. Here rows and columns refer to twitter bootstrap's grid system. I want to filter data from these cells when the user enters something into the search box located in the same page in real time. This is very similar to list.js instead the data is not presented in lists/columns but instead through the grid system of bootstrap.
An example of one of the rows is:
<div class="row">
<div class="col-md-4">
<figure style="text-align: center">
<img src="projects/2015/images/1.jpg" width="80%" class="img-thumbnail">
<figcaption>
<h4 class="caption">
<a id="caption1" style="cursor: pointer" >Assessing Public ...</a>
</h4>
</figcaption>
</figure>
<p id="abstract1" style="display: none" class="abstract">
In the ....
</p>
</div>
<div class="col-md-4">
<figure style="text-align: center">
<img src="projects/2015/images/2.jpg" width="80%" class="img-thumbnail">
<figcaption>
<h4 class="caption">
<a id="caption2" style="cursor: pointer">Feasibility of...</a>
</h4>
</figcaption>
</figure>
<p id="abstract2" style="display: none" class="abstract">
Community-based businesses...
</p>
</div>
<div class="col-md-4">
<figure style="text-align: center">
<img src="projects/2015/images/3.jpg" width="80%" class="img-thumbnail">
<figcaption>
<h4 class="caption">
<a id="caption3" style="cursor: pointer">Improving Agricultural Practices in Farm Lands in Mandi through Technology</a>
</h4>
</figcaption>
</figure>
<p id="abstract3" style="display: none" class="abstract">
Agriculture is...
</p>
</div>
</div>
So, how can I filter such content like list.js filters list. The content will be filtered based on the data presented in the captions and abstracts.