I don't understand how to make a 3 images columns in 2 columns on mobile. I found that there is an issue with JS. In JS there is a condition for minslide:3 and maxslide:3...
So that in mobile also it showing 3 slides.. how to make it to be visible in 2 slider.. I mean in 2 columns..
$j('#slider-collection-product .slides').bxSlider({
auto: false,
pager: false,
responsive: true,
slideWidth: 500,
slideMargin: 50,
minSlides: 3,
maxSlides: 3,
moveSlides: 3
});
<div class="category-body sub_category_16">
<div class="slider slider-category">
<div class="slider-clip">
<div class="bx-wrapper" style="max-width: 1248px;">
<div class="slider" id="slider-collection-product">
<div class="slider-clip" style="width:100%;">
<ul class="slides">
<li class="slide">
<div class="slide-image">
<a href="#">
<img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
</a>
</div>
<div class="slide-content">
<h4 class="slide-title">Bicolore Linen Sheet Set</h4>
<p class="slide-price">€1,650 - €1,700</p>
<div class="promo_text"></div>
</div>
</li>
<li class="slide">
<div class="slide-image">
<a href="#">
<img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
</a>
</div>
<div class="slide-content">
<h4 class="slide-title">Bicolore Linen Sheet Set</h4>
<p class="slide-price">€1,650 - €1,700</p>
<div class="promo_text"></div>
</div>
</li>
<li class="slide">
<div class="slide-image">
<a href="#">
<img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
</a>
</div>
<div class="slide-content">
<h4 class="slide-title">Bicolore Linen Sheet Set</h4>
<p class="slide-price">€1,650 - €1,700</p>
<div class="promo_text"></div>
</div>
</li>
<li class="slide">
<div class="slide-image">
<a href="#">
<img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
</a>
</div>
<div class="slide-content">
<h4 class="slide-title">Bicolore Linen Sheet Set</h4>
<p class="slide-price">€1,650 - €1,700</p>
<div class="promo_text"></div>
</div>
</li>
<li class="slide">
<div class="slide-image">
<a href="#">
<img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
</a>
</div>
<div class="slide-content">
<h4 class="slide-title">Bicolore Linen Sheet Set</h4>
<p class="slide-price">€1,650 - €1,700</p>
<div class="promo_text"></div>
</div>
</li>
<li class="slide">
<div class="slide-image">
<a href="#">
<img src="images/3FR2954E2400_BE03_02_2_1_44.jpg" data-src="images/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette">
</a>
</div>
<div class="slide-content">
<h4 class="slide-title">Bicolore Linen Sheet Set</h4>
<p class="slide-price">€1,650 - €1,700</p>
<div class="promo_text"></div>
</div>
</li>
</ul>
<!-- /.slides -->
</div>
<!-- /.slider-clip -->
</div>
<!-- /.slider -->
</div>
</div>
</div>
</div>
<!-- /.category-body -->
Brute but probably most simple workaround would be to include media-query dependent javascript, and trigger different bxslider settings dependent on the width:
if (document.documentElement.clientWidth < 900) {
// scripts
}
OR:
var mq = window.matchMedia('#media all and (max-width: 700px)');
if(mq.matches) {
// the width of browser is more then 700px
} else {
// the width of browser is less then 700px
}
Media Queries & javascript from sitepoint
Media Queries & javascript from modernweb
Related
I am trying to animate the strokes that link my div's together but I would like to animate them from 0 to 100% when element is hovered over, would anyone have a solution?
So I am trying to animate the line so they draw from a point A to completion in point Z. I hope you can understand better with the code.
here is the website : https://willowy-rolypoly-66ca67.netlify.app/
<!-- language: lang-html -->
<div>
<div id="content">
<div id="div1" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_08.png" data-imgid="article08"
data-line="lineArticle08" data-scrollable="true" data-border="true">
<img class="intro" src="./img/machineLearning.png" alt="">
</a>
</div>
<div id="div2" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_02.png" data-imgid="article02"
data-line="lineArticle02" data-scrollable="true" data-border="true">
</a>
</div>
<div id="div3" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_03.png" data-imgid="article03"
data-line="lineArticle03" data-scrollable="true" data-border="true">
<img src="./img/lotus.png" alt="">
</a>
</div>
<div id="div4" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_09.png" data-imgid="article09"
data-line="lineArticle09" data-scrollable="true" data-imganimation="zoom" data-border="true">
<img class="intro" src="./img/machineLearning.png" alt="">
</a>
</div>
<div id="div5" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_10.png" data-imgid="article10"
data-line="lineArticle10" data-scrollable="true" data-imganimation="zoom" data-border="true">
<img src="./img/machineLearning.png" alt="">
</a>
</div>
<div id="div6" class="mydiv">
<a class="indeximg" data-img="img/pbb-articles_Page_01.png" data-imgid="article01"
data-line="lineArticle01" data-scrollable="true" data-imganimation="zoom" data-border="true">
<img class="intro" src="./img/machineLearning.png" alt="">
</a>
</div>
</div>
<div class=" line" id="line1"></div>
<div class="line" id="line2"></div>
<div class="line" id="line3"></div>
<div class="line" id="line4"></div>
<div class="line" id="line5"></div>
<div class="line" id="line6"></div>
<div class="line" id="line7"></div>
</div>
<!-- language: lang-js -->
function loop() {
adjustLine($('#div1'), $('.canvas-box'), $('#line1'));
adjustLine($('#div2'), $('.canvas-box'), $('#line2'));
adjustLine($('#div3'), $('.canvas-box'), $('#line3'));
adjustLine($('#div4'), $('.canvas-box'), $('#line4'));
adjustLine($('#div5'), $('.canvas-box'), $('#line5'));
adjustLine($('#div6'), $('.canvas-box'), $('#line6'));
function adjustLine(from, to, line) {
if (from.length === 0 || to.length === 0 || line.length === 0) {
return;
}
I would like to add html, css code to the wordpress homepage using javascript.
The problem that there is no id or different css class on the objects that I would like to change (I would like to add text and button lint to the images).
I have tried something like this but can't find solution for the specific problem
// Inspect element shows something like
// #p-tab-1 > div > div.owl-stage-outer > div > div:nth-child(11) > div > div > div > div > div > a.lightbox-image
// I have tried something like this but can't find solution for the specific problem
document.getElementById('#p-tab-1 > div > div.owl-stage-outer > div > div:nth-child(11) > div > div > div > div > div > a.lightbox-image').innerHTML = '<ol><li>html data</li></ol>';
<div class="p-tabs-content">
<!--Portfolio Tab / Active Tab-->
<div class="p-tab active-tab" id="p-tab-1">
<div class="project-carousel owl-theme owl-carousel">
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2017/10/LazyBag-Beli3-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<span class="icon fa fa-link"></span>
<a class="lightbox-image" href="/wp-content/uploads/2017/10/LazyBag-Beli3.jpg" title="Lazy bag (Bež)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<span class="icon fa fa-link"></span>
<a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b.jpg" title="Lazy bag (Beli)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Crni-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<span class="icon fa fa-link"></span>
<a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Crni.jpg" title="Lazy bag (Crni)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
You are looking for querySelector or querySelectorAll
Also the path can be simplified
Are you sure you want to fill an achor with an OL?
I added the start parameter
[...document.querySelectorAll('.gallery-item a.lightbox-image')]
.forEach(
(a,i) => a.innerHTML = '<ol start="'+(i+1)+'"><li>html data</li></ol>'
);
<div class="p-tabs-content">
<!--Portfolio Tab / Active Tab-->
<div class="p-tab active-tab" id="p-tab-1">
<div class="project-carousel owl-theme owl-carousel">
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2017/10/LazyBag-Beli3-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<span class="icon fa fa-link"></span>
<a class="lightbox-image" href="/wp-content/uploads/2017/10/LazyBag-Beli3.jpg" title="Lazy bag (Bež)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<span class="icon fa fa-link"></span>
<a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Beli-2b.jpg" title="Lazy bag (Beli)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
<!--Gallery Item-->
<div class="gallery-item">
<div class="inner-box">
<div class="image"><img width="430" height="500" src="/wp-content/uploads/2019/05/Lazy-bag-Crni-430x500.jpg" class="attachment-oviedo_430x500 size-oviedo_430x500 wp-post-image" alt="" />
<!--Overlay Box-->
<div class="overlay-box">
<div class="content">
<span class="icon fa fa-link"></span>
<a class="lightbox-image" href="/wp-content/uploads/2019/05/Lazy-bag-Crni.jpg" title="Lazy bag (Crni)" data-fancybox-group="gallery"><span class="icon fa fa-search"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
you should use this
for first match element:
document.querySelector("Your selector here");
for get all matches elements:
document.querySelectorAll("Your selector here");
your code:
for(var i = 0 ; i < document.querySelectorAll("a.lightbox-image").length ; i++){
document.querySelectorAll("a.lightbox-image")[i].innerHtml = "<ol><li>html data</li></ol>";
}
I have been working on a portfolio for a small firm that I have. I was planning to have the same function as this one from e-onetime http://eone-time.com/#team do you think this is possible with a gif image. The function that I would like to have is that on hover gif animated 1 time, or should I set multiple images like what they did on their portfolio and let it scroll up and down onclick.
This is a section from my TEAM section in which the static gif and animated gif is located:
<!-- Team Section -->
<section id="team" class="content-section text-center">
<div class="team-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h1>TEAM</h1>
<HR>
</div>
</div>
<!-- Team Grid --><section class="main">
<div id="items">
<div class="item">
<a id="1" class="work page-scroll">
<img class="media" src="img/tryimages/greggy.png"/>
<div class="content">
<img class="media" src="img/tryimages/greggy.gif"/>
<!--<h2 class="title">Click</h2>!-->
</div>
</a>
</div>
<div class="item">
<a id="2" class="work page-scroll">
<img class="media" src="img/tryimages/dennise.png"/>
<div class="content">
<img class="media" src="img/tryimages/dennise.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="3" class="work page-scroll">
<img class="media" src="img/tryimages/jm.png"/>
<div class="content">
<img class="media" src="img/tryimages/jm.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="4" class="work page-scroll">
<img class="media" src="img/tryimages/hannah.png"/>
<div class="content">
<img class="media" src="img/tryimages/hannah.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
This is the javascript function I have for my team profiler:
</script>
<!--Team JS Function!-->
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div, #pages2 div").siblings().hide("slow");
$("#pages div#" + id + "").toggle("slow");
});
$("#items2 a").click(function() {
var id = $(this).attr("id");
$("#pages2 div, #pages div").siblings().hide("slow");
$("#pages2 div#" + id + "").toggle("slow");
});
</script>
just animate background-image using css keyframes for a .animated class, and then add this to your javascript:
$('#items a').mouseover(function(){
$(this).toggleClass('animated');
});
I'm attempting to add an additional slide to my slideshow and for some reason it seems to merge two slides. I'm not sure exactly what I've done to cause this. Any suggestions are greatly appreciated.
Slider Source:
<!-- BEGIN ASYNC SLIDER -->
<div id="content-slider">
<ul id="async-slider">
<li class="slide">
<div class="three-fifth fl-left" style="width: 425px; height: 242px">
<h2>Brighter World Lighting - NY</h2>
<h3><font size="5"><i>"A not just for profit company!"</i></font></h3>
<p>...</a>
</div>
<img class="fl-right" src="img/logolrg.png" alt="image" width="468" height="329" />
</li>
<li class="slide">
<div class="three-fifth fl-left">
<h2> </h2>
<img class="fl-right" src="img/HOR1.jpg" alt="image" width="450" height="320" />
<h3> </h3>
<p>...</a>
</div>
</li>
<li class="slide">
<div class="three-fifth fl-left">
<h2>Energy Efficient Lighting Products to fit your needs</h2>
<h3><font size="5"><i>T8, T12, E27, Outdoor Lighting, etc</font></i></h3>
<p>...</a>
</div>
<img class="fl-right" src="img/sliders/async/2Transparent.png" alt="image" width="347" height="305" />
</li>
<li class="slide">
<div class="three-fifth fl-left">
<h2> </h2>
<img class="fl-right" src="img/REBATE.jpg" alt="image" width="450" height="321" />
<h3> </h3>
<p>...</a>
</div>
</li>
<li class="slide">
<div class="three-fifth fl-left">
<h2>Tax Credits, Rebates, Financing and Grants available for those who qualify</h2>
<div>
<h3><font size="5"><i>Federal, state and local tax incentives available<br />
Utility company discounts and rebates
<br />
Project financing available to offset costs vs. Savings</font>
</div>
<h3></a>
</h3></div>
<img class="fl-right" src="img/sliders/async/3.gif" alt="image" />
</li>
<li class="slide">
<div class="three-fifth fl-left">
<h2> </h2>
<img class="fl-right" src="img/REBATE.jpg" alt="image" width="450" height="321" />
<h3> </h3>
<p>...</a>
</div>
</li>
<li class="slide">
<img class="fl-left" src="img/sliders/async/4Transparent.png" alt="image" width="347" height="305" />
<div class="three-fifth last fl-right">
<h2>Allow us to create a comprehensive energy partnership program profile for your business</h2>
<h3><font size="5"><i>Calculate your Energy Savings in Real Time!</i></font></h3>
<p>...</a>
</div>
</li>
</ul>
<div class="clear"></div><!-- end clearfix -->
</div><!-- end content-slider -->
<!-- END ASYNC SLIDER -->
Screenshot of merged slides:
(you may want to visit the live site to compare proper and improper slides)
I would like to create a feature so when the user hovers over the LI, a div crawls down using jquery easing.
JsFiddle: http://jsfiddle.net/WZvPk/2/
This is what i have so far:
HTML
<div class="sectorWrapper">
<ul class="sectors">
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors/introtosectors/examplesectorpage.aspx" target="_self">
<div class="sectorTitle">
Sector 1
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" style="width: 193px; height: 88px;" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 2
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div></div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 3
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 4
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 5
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 6
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 7
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 8
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
<br />
</div>
</div>
</li>
</ul>
</div>
CSS:
/*force the image size to be set by css*/
div.sectorImage a img
{
width:193px;
height:88px;
}
div.showMe
{
display:block;
}
.sectorGrid
{
position:relative;
}
jquery
$("ul.sectors li").hover(
function () {
$("div.sectorImage div.showme").css("display", "block");
},
function () {
$("div.sectorImage div.showme").css("display", "none");
}
);
The idea is when the user hovers over the section it will slowely drop the hidden div at the bottom allowing them to click the "view project" link.
I am having problems making this work with just one LI, if you test the jsfiddle you can see display:block seems to work but for all the LI, which is wrong.
Could you help me now that ive explained better?
If you change this
$("div.sectorImage div.showme").css("display", "block");
to this
$(this).children(".sectorImage").children(".showme").css("display", "block");
you'll be showing only one div