Adding Additional Slide using HTML causes two slides to merge

Adding Additional Slide using HTML causes two slides to merge - javascript

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)

Related

Lazy load images in a modal with a slider

I have a website that I am trying to optimize and one of the things that keeps coming back is I need to lazy load my larger images that I have inside a modal, the modal works as it's supposed to and opens and closes and the slider works as intended, however when I add this code to lazy load the modal the pictures do not load when the modal is opened. When I remove it everything works again. Can anyone see a reason as to why this happens? I have read some stuff about in the <img src="" you are supposed to put a low res image and in the tag you are to add the data-src="" for the main picture. When I do this all that happens is the low res image loads, and the larger ones never load.
The page is live here: https://www.smart-1.us/media.php
<script>
function lazyLoad(){
var $images = $('.lazy_load');
$images.each(function(){
var $img = $(this),
src = $img.attr('data-src');
$img
.on('load',imgLoaded($img[0]))
.attr('src',src);
});
};
$('.modal').on("show.bs.modal", function () {
lazyLoad();
};
</script>
<div id="Lightbox" class="modal">
<span class="close pointer" onclick="closeLightbox()">×</span>
<div class="modal-content">
<div class="slide">
<img src="media/pictures/Calm cold day.webp" class="image-slide lazy_load" alt="N21AP Cold Day" title="N21AP Cold Day" />
</div>
<div class="slide">
<img src="media/pictures/N21AP cold day.webp" class="image-slide lazy_load" alt="N21AP In Snow" title="N21AP In Snow" />
</div>
<div class="slide">
<img src="media/pictures/Getting mission ready.webp" class="image-slide lazy_load" alt="Entering Mission Data" title="Entering Mission Data" />
</div>
<div class="slide">
<img src="media/pictures/Final walkaround.webp" class="image-slide lazy_load" alt="Pre-Takeoff Checks" title="Pre-Takeoff Checks" />
</div>
<div class="slide">
<img src="media/pictures/SMART-1 team cold day.webp" class="image-slide lazy_load" alt="N21AP and SMART-1 Team In Snow" title="N21AP and SMART-1 Team In Snow" />
</div>
<div class="slide">
<img src="media/pictures/N21AP getting fuel.webp" class="image-slide lazy_load" alt="N21AP Refueling" title="N21AP Refueling" />
</div>
<div class="slide">
<img src="media/pictures/N55PQ preflight checks.webp" class="image-slide lazy_load" alt="N55PQ Pre-flight" title="N55PQ Pre-flight" />
</div>
<div class="slide">
<img src="media/pictures/Entering mission data.webp" class="image-slide lazy_load" alt="Entering Flight Plan" title="Entering Flight Plan" />
</div>
<div class="slide">
<img src="media/pictures/Operations Center.webp" class="image-slide lazy_load" alt="SMART-1 Operations Center" title="SMART-1 Operations Center" />
</div>
<div class="slide">
<img src="media/pictures/SMART-1 N78AP close up.webp" class="image-slide lazy_load" alt="N78AP Low Pass" title="N78AP Low Pass" />
</div>
<div class="slide">
<img src="media/pictures/SMART-1 downtime fun.webp" class="image-slide lazy_load" alt="SMART-1 downtime fun" title="SMART-1 downtime fun" />
</div>
<div class="slide">
<img src="media/pictures/Park SMART-1.webp" class="image-slide lazy_load" alt="Park SMART-1" title="Park SMART-1" />
</div>
<a class="previous" onclick="changeSlide(-1)">❮</a>
<a class="next" onclick="changeSlide(1)">❯</a>
<div class="dots">
<div class="col">
<img src="media/pictures/Calm cold day thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(1)" alt="N21AP Cold Day" />
</div>
<div class="col">
<img src="media/pictures/N21AP cold day thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(2)" alt="N21AP In Snow" />
</div>
<div class="col">
<img src="media/pictures/Getting mission ready thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(3)" alt="N78AP Entering Mission Data" />
</div>
<div class="col">
<img src="media/pictures/Final walkaround thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(4)" alt="Pre-Takeoff Checks" />
</div>
<div class="col">
<img src="media/pictures/SMART-1 team cold day thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(5)" alt="N21AP and Smart-1 Team In Snow" />
</div>
<div class="col">
<img src="media/pictures/N21AP getting fuel thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(6)" alt="N21AP Refueling" />
</div>
<div class="col">
<img src="media/pictures/N55PQ preflight checks thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(7)" alt="N55PQ Pre-Flight" />
</div>
<div class="col">
<img src="media/pictures/Entering mission data thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(8)" alt="N78Ap Low Pass" />
</div>
<div class="col">
<img src="media/pictures/Operations Center thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(9)" alt="SMART-1 Operations center" />
</div>
<div class="col">
<img src="media/pictures/SMART-1 N78AP close up thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(10)" alt="SMART-1 N78AP close up" />
</div>
<div class="col">
<img src="media/pictures/SMART-1 downtime fun thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(11)" alt="SMART-1 downtime fun" />
</div>
<div class="col">
<img src="media/pictures/Park SMART-1 thumbnail.webp" class="modal-preview hover-shadow" onclick="toSlide(12)" alt="Park SMART-1" />
</div>
</div>
</div>
</div>

How to make a webpage fade in and fade out without it instantly fading in (Using JQuery)

I am trying to make it to where there is a clean fade in and out transition between the multiple HTML pages within my website. I am trying to achieve this by causing everything but the navbar in my body to fade out, and then having that part fade back in. The Fadeout portion works fine, but, when I try to fade back in, the other pages' content instantly appears instead of gradually appearing.
The Javascript:
$("#MainBody").css('display','none');
jQuery(document).ready(function(){
jQuery("#MainBody").fadeIn('slow',function(){
});
jQuery("a").on('click',function(event){
var thetarget = this.getAttribute('target')
if(thetarget != "_blank"){
var thehref = this.getAttribute('href')
event.preventDefault();
jQuery("#MainBody").fadeOut('slow',function(){
window.location =thehref;
$("#MainBody").fadeIn('slow', function(){
})
});
}
});
});
setTimeout(function(){
$('#MainBody').fadeIn();},1000);
The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hakim Ottey's Portfolio</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,300;1,200;1,400;1,700&display=swap"
rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="JS/script.js"></script>
</head>
<body>
<div class="Header">
<div class="Introduction">
<div class="Intro_Info">
<h1 class="Name">Hakim Ottey</h1>
<h2 class="Title">Game Designer</h2>
</div>
</div>
<div class="Resume">
<h2 class="Download">Download Resume</h2>
</div>
<ul class="Nav_Menu">
<a href="index.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">Home</li>
</div>
</a>
<a href="GD_Projects.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">Game Design Projects</li>
</div>
</a>
<a href="Prog_Projects.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">Programming Projects</li>
</div>
</a>
<a href="3DG_Art.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">3D Game Art</li>
</div>
</a>
<a href="2DG_Art.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">2D Game Art</li>
</div>
</a>
<a href="About_Me.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">About Me</li>
</div>
</a>
<a href="Contacts.html" class="Navi">
<div class="inlineNav">
<li class="navbutton">Contacts</li>
</div>
</a>
</ul>
</div>
<div id="MainBody">
<div class="General_Showcase">
<div class="General_Info">
<!-- first row -->
<ul class="InfoRow">
<li class="infoinline">
<div class="showcase">
<div class="Info">
<h3>Experience</h3>
<ul>
<li class="list_head">
<h4>AI Programmer for robot development</h4>
</li>
<ul>
<li class="list_entry">Created contour recognition for robot</li>
<li class="list_entry"> Managed group milestones and needs </li>
</ul>
<li class="list_head">
<h4>Co-Lead and programmer for Project Techno </h4>
</li>
<ul>
<li class="list_entry">Programmed Loading and Character Select Menu</li>
<li class="list_entry">Re-worked vehicle functionality </li>
</ul>
<li class="list_head">
<h4>Programmer for InternMe App</h4>
</li>
<ul>
<li class="list_entry">Developed Wireframes for app</li>
<li class="list_entry">Programmed screen transitioning and basic functionality
for
the app
</li>
</ul>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="showcase">
<div class="Info">
<h3>Skills</h3>
<ul>
<li class="single_list_entry">2D Asset Creation</li>
<li class="single_list_entry">3d Asset Creation</li>
<li class="single_list_entry">Test Suite Creation</li>
<li class="single_list_entry">Programming in C++, C#, Python, Dart, XAML, and Java
</li>
<li class="single_list_entry">Website Development</li>
<li class="single_list_entry">Unity Engine Development</li>
<li class="single_list_entry">Unreal Engine Development</li>
<li class="single_list_entry">Chatbot Development</li>
<li class="single_list_entry">App Development</li>
<li class="single_list_entry">AI Development</li>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="small_box">
<div class="topspace">
</div>
<div class="Info">
<img class="sm_images" src="Images/Cirlce_Overhead_PNG.jpg">
</div>
</div>
</li>
<li class="infoinline">
<div class="showcase">
<div class="topspace">
</div>
<div class="Info">
<img class="images" src="Images/HO_Wall.png">
</div>
</div>
</li>
</ul>
<!-- second row -->
<ul class="InfoRow">
<li class="infoinline">
<div class="showcase">
<div class="Info">
<h3>Program Experience</h3>
<ul>
<li class="single_list_entry">Microsoft Visual Studio</li>
<li class="single_list_entry">Microsoft Access</li>
<li class="single_list_entry">PHPMyAdmin</li>
<li class="single_list_entry">Adobe Photoshop</li>
<li class="single_list_entry">Adobe Illustrator</li>
<li class="single_list_entry">Adobe Premiere</li>
<li class="single_list_entry">Autodesk 3DSMax</li>
<li class="single_list_entry">Autodesk Maya</li>
<li class="single_list_entry">Unity Engine</li>
<li class="single_list_entry">Unreal Engine</li>
<li class="single_list_entry">Valve Hammer Editor</li>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="showcase">
<div class="Info">
<h3>Languages</h3>
<ul>
<li class="single_list_entry">HTML</li>
<li class="single_list_entry">CSS</li>
<li class="single_list_entry">C#</li>
<li class="single_list_entry">UnityScript</li>
<li class="single_list_entry">Python</li>
<li class="single_list_entry">Dart</li>
<li class="single_list_entry">XAML</li>
<li class="single_list_entry">Java</li>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="small_box">
<div class="Info">
<h3>Engines</h3>
<ul>
<li class="single_list_entry">Construct</li>
<li class="single_list_entry">Unreal Engine</li>
<li class="single_list_entry">Unity Engine</li>
<li class="single_list_entry">Valve Hammer Editor</li>
</ul>
</div>
</div>
</li>
<li class="infoinline">
<div class="showcase">
<div class="Info">
<div class="topspace">
</div>
<iframe class="images" src="https://www.youtube.com/embed/XaqywWdpW4k" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="Footer">
<p class="footinfo">Hakim Ottey © 2019</p>
</div>
</body>
</html>
This is an example of what the other pages have as content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Design Projects | Hakim Ottey's Portfolio</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,300;1,200;1,400;1,700&display=swap"
rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="JS/script.js"></script>
</head>
<body>
<div class="Header">
<div class="Introduction">
<div class="Intro_Info">
<h1 class="Name">Hakim Ottey</h1>
<h2 class="Title">Game Designer</h2>
</div>
</div>
<div class="Resume">
<h2 class="Download">Download Resume</h2>
</div>
<ul class="Nav_Menu">
<a href="index.html" id="Home">
<div class="inlineNav">
<li class="navbutton">Home</li>
</div>
</a>
<a href="GD_Projects.html" id="GDP">
<div class="inlineNav">
<li class="navbutton">Game Design Projects</li>
</div>
</a>
<a href="Prog_Projects.html" id="PP">
<div class="inlineNav">
<li class="navbutton">Programming Projects</li>
</div>
</a>
<a href="3DG_Art.html" id="3DGA">
<div class="inlineNav">
<li class="navbutton">3D Game Art</li>
</div>
</a>
<a href="2DG_Art.html" id="2DGA">
<div class="inlineNav">
<li class="navbutton">2D Game Art</li>
</div>
</a>
<a href="About_Me.html" id="AboutMe">
<div class="inlineNav">
<li class="navbutton">About Me</li>
</div>
</a>
<a href="Contacts.html" id="Contacts">
<div class="inlineNav">
<li class="navbutton">Contacts</li>
</div>
</a>
</ul>
</div>
<div id="MainBody">
<div class="Table_of_Contents">
<div>
<h3>Contents</h3>
</div>
<a href="" id="Adaptchar">
<div class="PageLink">
<p>Adaptchar</p>
</div>
</a>
<a href="" id="PageLink">
<div class="PageLink">
<p>Project Techno</p>
</div>
</a>
<a href="" id="P2CM">
<div class="PageLink">
<p>Portal 2 Custom Map</p>
</div>
</a>
<a href="" id="Unreal">
<div class="PageLink">
<p>Unreal Target Test</p>
</div>
</a>
<a href="" id="RBA">
<div class="PageLink">
<p>Rockstar Bully Analysis</p>
</div>
</a>
<a href="" i="CM">
<div class="PageLink">
<p>Card Mechanics</p>
</div>
</a>
</div>
<div class="GDBody">
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Adaptchar</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic" src="https://www.youtube.com/embed/CBCdtNp6UU0" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Adaptchar</h2>
</div>
<div class="PortExpl">
<p>By using Adaptchar, players playing role-playing games will be able to have their party grow
and
adapt to
how the
player wants to play the game. Using an Artificial Neural Network, players could either play
normally or
configure the weights of the ANN in order to teach the bots to make decisions that can
benefit
how
the
player
playstyle.</p>
</div>
</div>
</div>
<div class=Portblock>
<div class="PortPres">
<div class="PortObjname">
<h2>Project Techno</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic" src="https://www.youtube.com/embed/GxmuPkdXDzA" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Project Techno</h2>
</div>
<div class="PortExpl">
<p>Worked with the lead of Project Techno to develop the loading screen, the UI for the
Character
Select and
End of
Level Screens, and functionality of the game's main vehicle. This was a team effort, with me
being one
of the
programmers for the project.</p>
</div>
</div>
</div>
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Portal 2 Custom Map</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic" src="https://www.youtube.com/embed/r52zQmvZ4L0" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Portal 2 Custom Map</h2>
</div>
<div class="PortExpl">
<p>Using Valve's Hammer Editor, I created a custom map for Portal 2 that called for the player
to
use
alternate
means to catch objects and to reach different parts of the map. Also made a tutorial on
making
custom
brush
shapes within the editor.</p>
</div>
</div>
</div> -->
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Unreal Target Test</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic" src="https://www.youtube.com/embed/itt-z1gIYxY" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Unreal Target Test</h2>
</div>
<div class="PortExpl">
<p>Using Unreal Engine Blueprint, I created a target inlineNav map that had parts of the map
changing and
the
targets following a determined path.</p>
</div>
</div>
</div>
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Rockstar Bully Analysis/Other Blogs</h2>
</div>
<div class="PortPicBox">
<iframe class="PortPic"
src="https://docs.google.com/document/d/e/2PACX-1vQ--lYr9hisdK0AR5Vze8K9hldvgLg6EL8VhxnSyf2KaBBefB7-45DMnSH19fM0jk39mmECs4KTCd1M/pub?embedded=true"></iframe>
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Blogs</h2>
</div>
<div class="PortExpl">
<p>Studied the design of Bully's tutorial level and broke it down for an audience of possible
Game
Design
Students. Did this for other games as well, such as Don't Starve and Uncharted.</p>
</div>
</div>
</div>
<div class="Portblock">
<div class="PortPres">
<div class="PortObjname">
<h2>Card Mechanics and Art for Bring Them To The Festival</h2>
</div>
<div class="PortPicBox">
<img class="PortPicSmall" src="Images/Card1.png">
<img class="PortPicSmall" src="Images/Card2.png">
</div>
</div>
<div class="PortInfo">
<div class="PortObjname">
<h2>Info on Card Mechanics and Art</h2>
</div>
<div class="PortExpl">
<p>Integrated a way to use cards for the Board Game called Bring Them To The Festival. Also,
created
the
card
art by using a mixture of Photoshop and Illustrator. Development on Bring Them To The
Festival
was a
team
effort, with me being the card artist of the team. </p>
</div>
</div>
</div>
</div>
</div>
<div class="Footer">
<p class="footinfo">Hakim Ottey © 2019</p>
</div>
</body>
</html>

Mobile Responsive using JS Code

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

Hover not working for the image gallery

Image hover is not working in the below code. Whenever I try to hover on a particular image that particular image is not being displayed. But if I remove the second portion (In comments in code) from code then it's working perfectly.
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s">
<div class="section-heading text-center">
<h2 class="h-bold" style="margin-top:90px">1. Meadows Towers</h2>
<div class="divider-header"></div>
<p style="text-align:justify">It is a major construction firm.
</p>
</div>
</div>
</div>
</div>
<div class="gallery" align="center"><br>
<h4>Check details about project below</h4>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="img/works/1.jpg" alt="" />
<img onmouseover="preview.src=img2.src" name="img2" src="img/works/2.jpg" alt="" />
<img onmouseover="preview.src=img3.src" name="img3" src="img/works/3.jpg" alt="" />
<img onmouseover="preview.src=img4.src" name="img4" src="img/works/4.jpg" alt="" />
<img onmouseover="preview.src=img5.src" name="img5" src="img/works/5.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview" src="img/works/1.jpg" alt=""/>
</div>
<!--*****************Second portion*******************-->
<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s">
<div class="section-heading text-center">
<h2 class="h-bold" style="margin-top:90px">2.Shangrilla</h2>
<div class="divider-header"></div>
<p style="text-align:justify"> Construction is a major construction firm.
Our goal is to reach all the section of people from 2BHK, 3BHK and 4BHK.
</p>
</div>
</div>
</div>
</div>
<div class="gallery" align="center"><br>
<h4>Check details about project below</h4>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="img/works/1.jpg" alt="" />
<img onmouseover="preview.src=img2.src" name="img2" src="img/works/2.jpg" alt="" />
<img onmouseover="preview.src=img3.src" name="img3" src="img/works/3.jpg" alt="" />
<img onmouseover="preview.src=img4.src" name="img4" src="img/works/4.jpg" alt="" />
<img onmouseover="preview.src=img5.src" name="img5" src="img/works/5.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview" src="img/works/1.jpg" alt=""/>
</div>
</body>

Have this function which accepts target and source and changes to required target's src
function changeSrc(control,target)
{
var targets=target.children[0]; //get its children
targets.setAttribute('src',control.getAttribute('src'));//change its src
}
Your updated HTML
Instead of onmouseover="preview.src=img1.src" call function onmouseover as onmouseover="javascript:changeSrc(this,this.parentElement.nextElementSibling)"
DEMO HERE
The problem with your previous code was, there were 2 elements with same name preview and when you said preview.src it fetched list of elements and wasn't able to assign it to proper preview - element.

displaying a hidden div with a scroll down effect using jquery on hover

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

We Keep Coding

JavaScript is the programming language of the Web.

Adding Additional Slide using HTML causes two slides to merge - javascript

Related

Lazy load images in a modal with a slider

How to make a webpage fade in and fade out without it instantly fading in (Using JQuery)

Mobile Responsive using JS Code

Hover not working for the image gallery

displaying a hidden div with a scroll down effect using jquery on hover

Categories

Resources