Im having a page with lot of lightbox (more than one hundred)
Each time I have to add in lightbox-content and trigger-lightbox a class
like 1 2 3 4
and in the jquery i need to duplicate it to trigger the good lightbox. like
$('a#trigger-lightbox.1').click(function() {
$('.lightbox-background').fadeIn('slow');
$('#lightbox-content.1').fadeIn('slow');
});
$('a#trigger-lightbox.2').click(function() {
$('.lightbox-background').fadeIn('slow');
$('#lightbox-content.2').fadeIn('slow');
});
$('a#trigger-lightbox.3').click(function() {
$('.lightbox-background').fadeIn('slow');
$('#lightbox-content.3').fadeIn('slow');
});
$('a#trigger-lightbox.4').click(function() {
$('.lightbox-background').fadeIn('slow');
$('#lightbox-content.4').fadeIn('slow');
});
I'd like instead to have a javascript to add the class 1 2 3 etc, automatically + the jquery to trigger the lightbox-content if it has the same class
or at leat to have something like 'if trigger-lightbox- has same class of lightbox-content.
this way the code will be much shorter.
How is this possible to achieve ?
So far I tried the following:
var same = $(this).attr("class");
$('a#trigger-lightbox'+'.'+same).click(function() {
$('.lightbox-background').fadeIn('slow');
$('#lightbox-content'+'.'+same).fadeIn('slow');
});
But no success . . .
I have this codepen if that help ?
https://codepen.io/anon/pen/VQQzdJ
Really appreciate all your help !!
Working Codepen.
First of all the id should be unique in the same document, so please replace the duplicate ones by common classes, then you could use data-* attributes as the following example shows :
$('a.trigger-lightbox').click(function() {
var index = $(this).data('index');
$('.lightbox-background').fadeIn('slow');
$('.lightbox-content.'+index).fadeIn('slow');
});
$('.lightbox-background').click(function() {
$(this).fadeOut('slow');
$('.lightbox-content').fadeOut('slow');
});
$('a.trigger-lightbox').click(function() {
var index = $(this).data('index');
$('.lightbox-background').fadeIn('slow');
$('.lightbox-content.' + index).fadeIn('slow');
});
$('.lightbox-background').click(function() {
$(this).fadeOut('slow');
$('.lightbox-content').fadeOut('slow');
});
.lightbox-content {
background: white;
padding: 50px;
margin: 0 auto;
z-index: 999999;
display: none;
position: fixed;
left: 50%;
margin-left: -50px;
}
ul li {
list-style: none
}
.lightbox-background {
display: none;
background: rgba(0, 0, 0, 0.8);
width: 100%;
position: fixed;
height: 100%;
z-index: 1;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lightbox-content 1">TEST 1</div>
<div class="lightbox-content 2">TEST 2</div>
<div class="lightbox-content 3">TEST 3</div>
<div class="lightbox-content 4">TEST 4</div>
<ul class="accordion-content">
<li>
<a class="trigger-lightbox" href="#" data-index='1'><p>TRIGGER 1</p></a>
</li>
<li>
<a class="trigger-lightbox" href="#" data-index='2'><p>TRIGGER 2</p></a>
</li>
<li>
<a class="trigger-lightbox" href="#" data-index='3'><p>TRIGGER 3</p></a>
</li>
<li>
<a class="trigger-lightbox" href="#" data-index='4'><p>TRIGGER 4</p></a>
</li>
</ul>
<div class="lightbox-background"></div>
Firstly you're repeating the same id attribute across multiple elements which is invalid HTML. id must be unique. Use common classes to group elements instead.
To solve this issue, and make your code more DRY, you can use a data attribute on the trigger element which relates it to the target. This way you can have an infinite amount of HTML content without ever needing to amend the JS. Something like this:
$('.trigger').click(function() {
$('.lightbox-background').add($(this).data('target')).fadeIn('slow');
});
$('.lightbox-background').click(function() {
$(this).fadeOut('slow');
$('.lightbox').fadeOut('slow');
});
.lightbox {
background: white;
padding: 50px;
margin: 0 auto;
z-index: 999999;
display: none;
position: fixed;
}
ul li {
list-style: none
}
.lightbox-background {
display: none;
background: rgba(0, 0, 0, 0.8);
width: 100%;
position: fixed;
height: 100%;
z-index: 1;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lightbox" id="lightbox1">TEST 1</div>
<div class="lightbox" id="lightbox2">TEST 2</div>
<div class="lightbox" id="lightbox3">TEST 3</div>
<div class="lightbox" id="lightbox4">TEST 4</div>
<ul class="accordion-content">
<li>
<a href="#" class="trigger" data-target="#lightbox1">
<p>TRIGGER 1</p>
</a>
</li>
<li>
<a href="#" class="trigger" data-target="#lightbox2">
<p>TRIGGER 2</p>
</a>
</li>
<li>
<a href="#" class="trigger" data-target="#lightbox3">
<p>TRIGGER 3</p>
</a>
</li>
<li>
<a href="#" class="trigger" data-target="#lightbox4">
<p>TRIGGER 4</p>
</a>
</li>
</ul>
<div class="lightbox-background"></div>
Note that I amended the positioning of the lightbox in your CSS as it didn't work well in the snippet.
You can use data attributes. Each box and its corresponding trigger have the same identifier. Simply grab the id of the trigger when you click on it, and use it to fade in the right box.
$('.trigger-lightbox').on('click', function() {
const id = $(this).data('id');
$(`.box[data-id="${id}"]`).fadeIn('slow');
});
.box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="trigger-lightbox" data-id="1">Trigger one</a>
<a class="trigger-lightbox" data-id="2">Trigger one</a>
<div class="box" data-id="1">Box one</div>
<div class="box" data-id="2">Box two</div>
Related
I am new to HTML, CSS, and Javascript. For some time I have been looking to design my website the same as Harvard school of design but after a lot of search over the internet, I can only find this result change links with images
$('#thumbs img').hover(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
$('#thumbs2 a').hover(function(){
$('#largeImage2').attr('src',$(this).attr('href').replace('thumb','large'));
});
$('#thumbs3 a').hover(function(){
$('#largeImage3').attr('src',this.getAttribute('data-swap'));
});
#thumbs ,#thumbs2, #thumbs3 {overflow: hidden; }
#thumbs img, #largeImage, #largeImage2 ,#largeImage3
{ border: 1px solid gray; padding: 4px; background-color: white; cursor: pointer; }
#thumbs img ,#thumbs2 a ,#thumbs3 a{ float: left; margin-right: 6px; }
#panel { position: relative; }
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
//WITH IMAGE LINKS </br><hr></br>
<div id="gallery">
<div id="panel">
<img id="largeImage" src="http://placehold.it/100" />
<div id="description">main image with image links</div>
</div>
<div id="thumbs">
<img src="http://placehold.it/100/ee55ee" alt="1st image description" />
<img src="http://placehold.it/100/080" alt="2nd image description" />
<img src="http://placehold.it/100/ff6" alt="3rd image description" />
<img src="http://placehold.it/100/ff3322" alt="4th image description" />
</div>
</div>
</br><hr></br>
//WITH SIMPLE LIVE LINKS </br></br>
<div id="gallery2">
<div id="panel">
<img id="largeImage2" src="http://placehold.it/100/" />
<div id="description">main image with simple links</div>
</div>
<div id="thumbs2">
<a href="http://placehold.it/100/ff3322" >link1</a>
link1
link1
link1
</div>
</div>
</br><hr></br>
//WITH SIMPLE [DISABLED] LINKS </br></br>
<div id="gallery3">
<div id="panel">
<img id="largeImage3" src="http://placehold.it/100/" />
<div id="description">main image with simple links</div>
</div>
<div id="thumbs3">
<a href="#" data-swap="http://placehold.it/100/ff3322" >link1</a>
link1
link1
link1
</div>
</div>
which is not much desired. The result which I got on this website is really I am looking forward to the time being. Being new to front-end technologies facing a hard time achieving this goal. I would really appreciate getting help.
Having looked at the code referenced in the question, I wonder whether something a bit simpler would suffice.
In particular, there doesn't really seem to be a need for jquery and it's probably useful to get a basic understanding of 'raw' Javascript before taking on a library.
This snippet has very minimal styling deliberately, just to show the basic JS.
UPDATE To make the transition to the hovered element smoother all images are loaded to begin with. They are stored in the bigImage element so it will be possible to show them offset and transition them in and out as desired using CSS. This code is just the basic stuff needed to show an image on a hover event.
<!-- begin snippet: js hide: false console: true babel: false -->
#container div.bigImage {
display: inline-block;
}
.bigImage img {
display: none;
}
#container ul {
list-style: none;
width: auto;
float: left;
margin: 2vw;
}
#container ul li {
width: auto;
}
#container ul li a {
text-decoration: none;
}
.bigImage img.show {
display: block;
}
<div id="container">
<ul id="ul">
<li>Pic 1</li>
<li>Pic 2</li>
<li>Pic 3</li>
<li>Pic 4</li>
</ul>
<div class="bigImage">
<img src="https://picsum.photos/id/1/300/300.jpg" class="show">
<img src="https://picsum.photos/id/2/300/300.jpg">
<img src="https://picsum.photos/id/3/300/300.jpg">
<img src="https://picsum.photos/id/4/300/300.jpg">
</div>
</div>
const bigImage = document.querySelector("#container div.bigImage"); //get the bigImage element
const img = bigImage.querySelector("img"); // get the img element within it
const textdiv = bigImage.querySelector("div.text"); //get the div which holds the text
const lis = document.querySelector("#container ul").getElementsByTagName("li"); //get a collection of the li elements inside the ul element
// listen for mouseover event on the li elements
for (var i=0; i<lis.length; i++) {
lis[i].addEventListener('mouseover', function() {
// on an event this will refer to the element that witnessed that event
img.src = this.getAttribute("data-src");
textdiv.innerHTML = this.getAttribute("data-text");
}
);
}
// initialise the bigImage with the image and text from the first list element
bigImage.querySelector("img").src = lis[0].getAttribute("data-src");
bigImage.querySelector("div").innerHTML = lis[0].getAttribute("data-text");
#container div.bigImage {
display: inline-block;
}
#container ul {
list-style: none;
width: auto;
float: left;
margin: 2vw;
}
#container ul li {
width: auto;
}
#container ul li a {
text-decoration: none;
}
<div id="container">
<ul>
<li data-src="https://picsum.photos/id/1/300/300.jpg" data-text="Picture 1">Pic 1</li>
<li data-src="https://picsum.photos/id/2/300/300.jpg" data-text="Picture 2">Pic 2</li>
<li data-src="https://picsum.photos/id/3/300/300.jpg" data-text="Picture 3">Pic 3</li>
<li data-src="https://picsum.photos/id/4/300/300.jpg" data-text="Picture 4">Pic 4</li>
</ul>
<div class="bigImage">
<img src="">
<div class="text">
</div>
</div>
Hello , i Have some basic code to change the background for my app
i need to save the path of selected image for this img src of
this div id="productImage" When the USER 1 Select any image From
the list to local storage and get the current selected image after
reload the page form local storage For example> local storage data
key background-path:background/image1.png
Thanks for help
function Selectbk() {
$('.thumbnail').click(function () {
var src = $(this).find('img').attr('src').replace('empty.png');
$('#productImage').attr('src', src);
});
}
ul.chat-gallery {
list-style-type: none;
display: inline;
width: auto;
position: relative;
left: -0%;
}
ul.chat-gallery img {
max-width: 60px;
position: relative;
border-radius: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="productImage" src="https://vps.nemra-1.com/v4/mobile/img/background/empty.png" style="height:30%;width:40%">
<a class="cancel" href="#"></a>
<div class="popup">
<h2>Do you like To Switch Background?</h2>
<div class="content">
<ul class="chat-gallery">
<li>
<a class="thumbnail" href="#" onclick="Selectbk()"><img src="https://ak6.picdn.net/shutterstock/videos/1027713866/thumb/10.jpg"></a>
</li>
<li>
<a class="thumbnail" href="#" onclick="Selectbk()"><img src="https://ak6.picdn.net/shutterstock/videos/1022870776/thumb/11.jpg"></a>
</li>
</ul>
</div>
</div>
You could use $().data instead of localStorage:
function Selectbk() {
$('.thumbnail').click(function() {
var src = $(this).find('img').attr('src').replace('empty.png');
$('#productImage').attr('src', src);
$('#productImage').data('src', src);
});
}
$("button").click(function() {
console.log($('#productImage').data('src'));
});
ul.chat-gallery {
list-style-type: none;
display: inline;
width: auto;
position: relative;
left: -0%;
}
ul.chat-gallery img {
max-width: 60px;
position: relative;
border-radius: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="cancel" href="#"></a>
<button>get src</button>
<div class="popup">
<h2>Do you like To Switch Background?</h2>
<div class="content">
<ul class="chat-gallery">
<li>
<a class="thumbnail" href="#" onclick="Selectbk()"><img src="https://ak6.picdn.net/shutterstock/videos/1027713866/thumb/10.jpg"></a>
</li>
<li>
<a class="thumbnail" href="#" onclick="Selectbk()"><img src="https://ak6.picdn.net/shutterstock/videos/1022870776/thumb/11.jpg"></a>
</li>
</ul>
</div>
</div>
<img id="productImage" src="https://vps.nemra-1.com/v4/mobile/img/background/empty.png" style="height:30%;width:40%">
so I have a div with navigational links (set up using ul/li and a href within the li's).
Below that I have 4 other div's. I only want 1 div shown at a time, they will then switch based on the users selection of the navigational LI's
I've used a similar setup on a different page, and have tried to port it over to my current page but to no avail...
JSFIDDLE
Please see the above jsfiddle for the HTML/CSS/JS involved.
HTML:
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active"><span>Home</span></li>
<li><span>Find Your Vehicle</span></li>
<li><span>Downloads</span></li>
<li><span>Support</span></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
Any help is welcomed, I am still learning (aren't we always), so with any fixes/tips, please detail why it works, or what i did wrong that's making this not work. (if that makes sense!)
Thanks again for your help!
This is one way of achieving it.
HTML - added "navlink" class to your anchor elements, and gave them a data-section attribute that refers to the tab they should show:
<div id="content">
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li><span>Home</span></li>
<li><span>Find Your Vehicle</span></li>
<li><span>Downloads</span></li>
<li><a data-section="support" href="#support" rel="support"><span>Support</span></a></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
JavaScript - see inline comments:
$(document).ready(function(){
// start of at the home page
navigateTo("#home");
// for every navlink element
$('.tabs > li > a').each(function() {
//when it is clicked
$(this).click(function(e) {
e.preventDefault();
// navigate to the section ilinked to in the href
navigateTo($(this).attr('href'));
});
});
});
function navigateTo(sectionId) {
//hide all tabs
$('.tab_content').hide();
//then show the one we want
$(sectionId).show();
}
You don't need separate click handlers for each menu item. The #tabs li click handler will suffice. I removed the click handlers on each of the links since they are not necessary.
$("#tabs li").click(function() {
// First remove class "active" from currently active tab
$("#tabs li").removeClass('active selected');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active selected");
// Hide all tab content
$(".tab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn(0);
// At the end, we add return false so that the click on the link is not executed
return false;
});
ul {
list-style: none;
}
.man-banner {
background: url("../images/man-logo.png") no-repeat top;
border-radius: 8px 8px 0 0;
height: 93px;
max-width: 915px;
margin: 15px 15px 0 15px;
}
.banner-nav {
background: #F0F1F2;
border-bottom: 1px solid #D6D8DB;
height: 40px;
max-width: 915px;
margin: 0 15px 15px;
}
.banner-nav a {
font-family: MAN-light, Arial, sans-serif;
font-size: 16px;
margin-left: 20px;
text-decoration: none;
display: block;
float: left;
height: 40px;
position: relative;
color: #303C49;
line-height: 40px;
}
.banner-nav a:hover {
color: #303C49;
}
.banner-nav a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 5;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.banner-nav a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
ul.tabs li.selected a,
ul.tabs li.selected a:hover {
top: 0px;
font-weight: normal;
background: #FFF;
border-bottom: 1px solid #FFF;
color: #000;
}
/***************************/
/** Main Content Area **/
/***************************/
#content {
width: 950px;
margin: 5 10;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active"><a data-tab-id="#home"><span>Home</span></a>
</li>
<li><span>Find Your Vehicle</span>
</li>
<li><span>Downloads</span>
</li>
<li><span>Support</span>
</li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
You can try to use css to show and hide the blocks when there is an onclick event.
Here some sample code:
CSS
.activetab {
display: block;
}
.tab {
display: none;
}
JAVASCRIPT / JQUERY
$(document).ready(function() {
$(".tabmenu").on("click", function() {
$(".activetab").removeClass("activetab");
$(this).addClass("activetab");
});
});
HTML
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active tabmenu"><span>Home</span></li>
<li class="tabmenu"><span>Find Your Vehicle</span></li>
<li class="tabmenu"><span>Downloads</span></li>
<li class="tabmenu"><span>Support</span></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content tab">
1234156124
</div>
<div id="findvehicle" class="tab_content tab">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content tab">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content tab">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
If you want I can create a JSFiddle to see how it works
Hope this works for you!
You have a syntax error, you are closing your document ready callback more than once.
$("#findvehicle").click(function(){
$('a[rel="find_your_vehicle"]').trigger("click");
});
}); // Remove this
$("#downloads").click(function(){
$('a[rel="downloads"]').trigger("click");
});
}); // Remove this
When you remove these extra closes the tabs appear. You'll probably want to hide all but the default tab in that document ready call also.
This is my first post on Stack Overflow so sorry if I'm not clear in what I'm saying. But basically I'm working on a little school project and it's basically an All About Me site to refresh on what we've learned over the summer. I have tabs on the bottom of the screen for navigation and I have content in the center of the screen. Upon clicking a new tab or scrolling down, I want the corresponding div to slide into where the old content was. I don't have a huge knowledge of JavaScript so I have no idea how to go about doing this. I've been looking at image sliders but those aren't really what I'm looking for. I'm looking for something like this: http://coolcarousels.frebsite.nl/c/8/
This is how it looks right now:
http://i.imgur.com/BqZ78S3.jpg
This is basically all of my HTML so far:
<main class="content-container">
<section class="slider animated fadeInDown">
<div class="intro-content">
<h1>Hi, my name is Brian Hurtado.</h1>
<h3>I enjoy making beautiful and innovative websites.</h3>
</div>
<div class="summer-content">
<h1>This is my text about summer.</h1>
<h3>This is some more text about my summer.</h3>
</div>
<div class="design-content">
<h1>This is some text about web design.</h1>
<h3>This is some more text about web design.</h3>
</div>
<div class="schedule-content">
<h1>This is some text about my schedule.</h1>
<h3>Probably going to put a table in here.</h3>
</div>
<div class="site-content">
<h1>This is some text about what I want to do with the school site.</h1>
<h3>This is some more text about what I want to do with the school site.</h3>
</div>
<div class="goals-content">
<h1>These are my goals that I hope to achieve in the future.</h1>
<h3>I have to think of some goals.</h3>
</div>
</section>
</main>
<nav class="main-nav">
<ul>
<li class="active">
<a href="#">
<span>
<img src="img/home.png">
</span>
<b>Intro</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/summer.png">
</span>
<b>Summer</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/design.png">
</span>
<b>Web Design</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/schedule.png">
</span>
<b>Schedule</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/site.png">
</span>
<b>School Site</b>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/goals.png">
</span>
<b>Goals</b>
</a>
</li>
</ul>
</nav>
And this is my CSS:
body {
font-family: Lato, sans-serif;
}
.content-container {
width: 100%;
height: 80vh;
text-align: center;
color: black;
font-size: 42px;
}
.slider {
width: 1200px;
height: 300px;
overflow: hidden;
margin: 0 auto;
position: relative;
top:250px;
}
.intro-content h3 {
margin-top: -30px;
}
.main-nav {
position: absolute;
bottom:0;
width: 100%;
background-color: #101518;
}
.main-nav ul {
width: 1200px;
margin: 0 auto;
text-align: center;
}
.main-nav ul li a {
color:white;
text-decoration: none;
}
.main-nav ul li {
display: inline-block;
padding: 15px 35px;
font-size: 20px;
color: white;
-o-transition:.3s ;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}
.main-nav ul li:not(.active) {
opacity: 0.5;
}
.main-nav ul li:hover {
opacity: 1;
}
.main-nav span {
width: 40px;
height: 40px;
display: block;
margin:0 auto 5px;
}
html {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../img/landscape.jpg") no-repeat center center;
background-size: cover;
}
What exactly do I need to do from here? I was thinking maybe doing an onclick function that switches the active class so that the non-active class is display:none, but I want it to have a sliding effect. I would really appreciate any help. If you need me to clarify anything please let me know.
You can use a variety of plugins as mentioned by Fabio above, or you might use this code as your starting point - FIDDLE.
Your link to coolcarousels showed it going horizontally, so that's how the fiddle works.
JS
$("#selector a").on("click",function(event){
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
},
1200);
});
Attribution is noted in the JS section of the fiddle.
I used a very simple script from this website;
http://jquery.malsup.com/cycle2/
Simply download and include Cycle2 plugin on your page (Make sure you also have the latest version of Jquery) and then declare your slideshow markup. There are loads of demo's on the site which are extremely easy to follow.
Goodluck with your project!
I have a drop down menu on a page and want the menu to drop down from the main item to the left. It presently drops down to the right.
I have a jsfiddle for it here.
As you can see it presently drops down to the right and resizes the page to fit. I want the menu to drop to the left and keep all the dimensions in tact. Is there an easy way. I know the jQuery menu widget can do it, but I had other issues with that.
The button is somewhere in the middle of the page, so ideally I want the drop down to be to drop down relative to the parent, not just as the jsfiddle shows which is fixed against the right hand side. Hope this clarifies.
CODE:
IN DOC READY
$(document).ready(function () {
// Menus
$('ul.menu').hide();
$('ul#viewMenu li').hover(function () {
$(this).children('ul.menu').animate({ opacity: 'show' }, 'slow');
}, function () {
$(this).children('ul.menu').animate({ opacity: 'hide' }, 'fast');
});
});
CSS
ul#viewMenu { overflow: hidden; }
ul#viewMenu li { float:left; display: block; text-align: left; line-height: 40px; }
ul#viewMenu li a { line-height: 40px; }
ul#viewMenu ul.menu { position: absolute; }
ul#viewMenu ul.menu li { float: none; }
HTML
<div style="display: inline-block; float: right;">
<ul id="viewMenu" style="list-style: none; margin: 0; padding: 0;">
<li style="display: block; float: left;"> <a class="nav-button view-type-button" style="text-align: center;" href="#"
title="Change the things.">
<span>
<img src="~/Content/themes/base/images/empty.png" style="height: 48px; width: 49px;" alt="Things" />
</span>
</a>
<ul class="view-menu-item view-menu-bottom-right menu"
style="width: 170px !important">
<li> <a class="nav-button" href="#" title="View data.">
<span class="thing1-calendar-button"></span>
<span>This 1</span>
</a>
</li>
<li> <a class="nav-button" href="#" title="View data.">
<span class="thing2-calendar-button"></span>
<span>This 2</span>
</a>
</li>
<li> <a class="nav-button" href="#" title="View data.">
<span class="thing3-calendar-button"></span>
<span>This 3</span>
</a>
</li>
</ul>
</li>
</ul>
Turns out all I needed to do was get hold of the current drawn position from the jQuery offset value. Then set the CSS position for the absolute element. Simples... when you know how!
var position = $('ul#viewMenu ul.menu').offset();
$('ul#viewMenu ul.menu').css({ top: (position.top) + 'px', left: (position.left - 160) + 'px' });
$('ul.menu').hide();
$('ul#viewMenu li').hover(function () {
$(this).children('ul.menu').animate({ opacity: 'show' }, 'slow');
}, function () {
$(this).children('ul.menu').animate({ opacity: 'hide' }, 'fast');
});
Simple. Just give this:
ul#viewMenu ul.menu {
position: absolute;
right: 0;
}
Fiddle: http://jsfiddle.net/praveenscience/T8hFW/1/