Two event for background image - javascript

I'm trying to create something to change wallpaper by clicking on picture or by clicking on a button.
Separately it's works, but when I click on a thumbnail wallpaper change and when I click on button I select a picture and it's ok but after if I want to click again on a thumbnail the problem appears, if someone can help me that would be very appreciated.
I created an example
$('ul#images li').click(function(e){
$('ul#images li').each(function(){
$(this).removeClass('active');
});
$(this).addClass('active');
var source = $(this).children('img').attr('src');
$('.outer').css('background', 'url('+source+')');
});
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
}

clicking on the pictures sets a background for the .outer div, the button sets the background for an image tag. Why not have the button set the background for the .outer div too? Then remove the image tag altogether. I think then it would work as you expect, example below.
In the below example...
I changed setting background, to setting backgound-image so setting it does not override the other background css.
$('ul#images li').click(function(e){
$('ul#images li').each(function(){
$(this).removeClass('active');
});
$(this).addClass('active');
var source = $(this).children('img').attr('src');
$('.outer').css('background-image', 'url('+source+')');
});
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
//$('#myImg').attr('src', e.target.result);
$('.outer').css('background-image', 'url('+e.target.result+')');
}
*, *:before, *:after {
margin: 0; padding: 0;
box-sizing: border-box;
color: white;
font-family: 'Open Sans', sans-serif;
}
html, body {
height: 100%;
width: 100%;
}
ul, ol {
list-style-type: none;
}
a,
a:visited,
a:focus {
text-decoration: inherit;
font-weight: inherit;
color: inherit;
}
.outer {
background: black;
background: url('https://hdfondsdecran.com/image/201609/71/nuage-vue-de-dessus-multicolore-merveilleux.jpg');
background-position: center center;
#include transform(scale(1.1));
background-size: cover;
display: table;
height: 100%;
width: 100%;
position: relative;
z-index: 1;
}
.overlay {
background: rgba(black,0.6);
height: 100%; width: 100%;
position: absolute;
z-index: 2;
left:0;
top:0;
background-repeat: repeat;
}
h1 {
font-weight: 700;
font-size: 7em;
font-size: 8vw;
text-transform: uppercase;
position: relative;
}
h2 {
font-style: italic;
font-weight: 300;
font-size: 1.1em;
font-size: 1.5vw;
}
.inner {
position: relative;
z-index: 3;
display: table-cell;
vertical-align: middle;
text-align: center;
text-shadow: 0 0 20px rgba(black,0.6);
}
button {
background: transparent;
border: 2px solid white;
margin: 5px;
font-size: 0.8em;
font-size: 1.5vw;
padding: 10px 15px;
border-radius: 5px;
font-weight: 400;
cursor: pointer;
#include transition(all 0.4s ease);
}
button:hover {
background: white;
color: black;
}
ul#images li {
display: inline-block;
margin: 10px;
border: 2px solid white;
border-radius: 5px;
cursor: pointer;
opacity: 0.5;
}
ul#images li:hover {
opacity: 1;
}
ul#images li.active {
opacity: 1;
}
ul#images li img {
width: 100px;
height: 50px;
display: block;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer">
<div class="overlay">
</div>
<div class="inner">
<br><br><h2>Change Background Image:</h2><br>
<ul id="images">
<li class="active"><img src="https://img.gadgethacks.com/img/86/37/63601592852769/0/get-ios-10s-new-wallpaper-any-phone.1280x600.jpg" /></li>
<li><img src="https://www.itl.cat/pngfile/big/2-20588_ios-wallpaper-iphone-wallpaper-hd-desktop.jpg" /></li>
<li><img src="https://i.pinimg.com/originals/42/65/79/426579e96e9333ed9518c2fd9d3e5482.jpg" /></li>
<li><img src="https://i.pinimg.com/originals/a1/4d/e0/a14de021c4fa8049d2d798d5b98d7419.jpg" /></li>
<input type="file" id="uploader" />
<label for="uploader">Parcourir</label>
</ul>
</div>
</div>

Related

JavaScript Not Manipulating Images

I'm new to Javascript and I have an assignment where I essentially just copied code from the instructions but when I go to run the whole website the JS doesn't do anything.
The objective is to add a click event handler to each of the thumbnail images so that when the smaller image is clicked, your code will show the larger version of the image in the <img> element within the <figure> element.
This same event handler will also set the <figcaption> text of the <figure> to the clicked thumbnail image's title attribute. The click event handler will be attached to the <div id="thumbnails"> element and not to the individual <img> elements.
This is what the JS should do:
When you click on one of the thumbnail images, the corresponding larger image is displayed as the main figure.
When you mouse over the main figure, the title should display against a slightly opaque white background and then fades once the mouse pointer is moved off
window.addEventListener("load", function() {
/*Noah Ratcliff*/
var thumbs = document.getElementById("thumbnails");
thumbs.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() == 'img') {
var clickedImageSource = e.target.src;
var newSrc = clickedImageSource.replace("small", "medium");
var featuredImage = document.querySelector("#featured img");
featuredImage.src = newSrc;
featuredImage.title = e.target.title;
}
});
var featured = document.getElementById("featured");
thumbs.addEventListener("mouseover", function(e) {
var caption = document.querySelector("#featured figcaption");
caption.style.transition = "opacity 1.5s";
caption.style.opacity = 0.80;
caption.innerHTML = document.querySelector("#featured img").title;
var caption = document.querySelector("#featured figcaption");
caption.style.transition = "opacity 1.5s";
caption.style.opacity = 0;
});
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Lobster);
p,
h1,
h2,
h3,
ul,
li,
body {
padding: 0;
margin: 0;
}
h1,
h2,
h3,
nav,
footer {
font-family: Lobster, Cambria, "Times New Roman", serif;
}
body {
font-family: "Open Sans", Verdana, Arial, sans-serif;
font-size: 100%;
background-color: #E8EAF6;
}
header {
padding: 15px;
width: auto;
margin: 0 0;
background-color: #303F9F;
color: #FAFAFA;
height: 30px;
}
header h2 {
float: left;
font-size: 22pt;
margin-left: 10px;
}
header nav {
float: right;
margin: 10px 15px 10px 10px;
top: 5px;
}
main {
margin: 20px 20px;
}
#featured {
margin: 0 2px;
border: solid 1px #ccc;
padding: 8px 5px 3px 9px;
width: 646px;
background-color: #FAFAFA;
}
#featured figcaption {
position: absolute;
top: 476px;
left: 32px;
width: 636px;
height: 70px;
background-color: floralwhite;
font-family: 'Open Sans', Verdana, Arial, sans-serif;
font-size: 150%;
font-weight: bold;
opacity: 0;
padding: 22px 2px 2px 2px;
text-align: center;
display: block;
}
#thumbnails img {
width: 116px;
height: 116px;
border: solid 1px #ccc;
padding: 4px;
margin: 5px 2px;
background-color: #FAFAFA;
}
#thumbnails img:hover {
transform: scale(1.1);
transition-duration: 300ms;
cursor: pointer;
}
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" alt="big version">
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" alt="Battle">
<img src="images/small/5856697109.jpg" title="Luneburg" alt="Luneburg">
<img src="images/small/6119130918.jpg" title="Bermuda" alt="Bermuda">
<img src="images/small/8711645510.jpg" title="Athens" alt="Athens">
<img src="images/small/9504449928.jpg" title="Florence" alt="Florence">
</div>
</main>
There are several things that are not right in the code: put the event listener on the thumbs instead of figure, abusing id's for css, using the style javascript instead of adding and removing classes (which makes it harder and is a bad practice in general), using querySelector when there is no need (witch also makes your code harder to read and querySelector is slower than getElementById).
Here is an example which should do what I understand you want. I'm not sure tough if I got the opacity thing right. There you will have to work.
window.addEventListener("load", function() {
/*Noah Ratcliff*/
const thumbs = document.getElementById("thumbnails");
thumbs.addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() == 'img') {
const clickedImageSource = e.target.src;
const newSrc = clickedImageSource.replace("small", "medium");
const featuredImage = document.getElementById("featured-img");
featuredImage.src = newSrc;
featuredImage.title = e.target.title;
featuredImage.alt = e.target.alt
}
});
const featured = document.getElementById("featured");
featured.addEventListener("mouseover", function(e) {
const captition = document.getElementById("fig-captition");
captition.classList.add("captition-hovered");
});
featured.addEventListener("mouseout",function(e) {
const captition = document.getElementById("fig-captition");
captition.classList.remove("captition-hovered");
});
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Lobster);
p,
h1,
h2,
h3,
ul,
li,
body {
padding: 0;
margin: 0;
}
h1,
h2,
h3,
nav,
footer {
font-family: Lobster, Cambria, "Times New Roman", serif;
}
body {
font-family: "Open Sans", Verdana, Arial, sans-serif;
font-size: 100%;
background-color: #E8EAF6;
}
header {
padding: 15px;
width: auto;
margin: 0 0;
background-color: #303F9F;
color: #FAFAFA;
height: 30px;
}
header h2 {
float: left;
font-size: 22pt;
margin-left: 10px;
}
header nav {
float: right;
margin: 10px 15px 10px 10px;
top: 5px;
}
main {
margin: 20px 20px;
}
.featured {
margin: 0 2px;
border: solid 1px #ccc;
padding: 8px 5px 3px 9px;
width: 646px;
background-color: #FAFAFA;
}
.captition-hovered {
position: absolute;
top: 476px;
left: 32px;
width: 636px;
height: 70px;
font-family: 'Open Sans', Verdana, Arial, sans-serif;
font-size: 150%;
font-weight: bold;
padding: 22px 2px 2px 2px;
text-align: center;
position: absolute;
z-index:1;
top: 50%;
opacity: 1;
background: rgba(255,250,240, 0.51);
}
.thumbnails img {
width: 116px;
height: 116px;
border: solid 1px #ccc;
padding: 4px;
margin: 5px 2px;
background-color: #FAFAFA;
}
.thumbnails img:hover {
transform: scale(1.1);
transition-duration: 300ms;
cursor: pointer;
}
.featured {
position: relative;
}
.featured-img:hover {
transition:opacity 1.5s;
opacity: 0.5;
}
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure class="featured" id="featured">
<img class="featured-img" id="featured-img" src="https://www.w3schools.com/css/img_lights.jpg" title="Battle" alt="big version">
<figcaption id="fig-captition">Battle</figcaption>
</figure>
<div class="thumbnails" id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" alt="Battle">
<img src="images/small/5856697109.jpg" title="Luneburg" alt="Luneburg">
<img src="images/small/6119130918.jpg" title="Bermuda" alt="Bermuda">
<img src="images/small/8711645510.jpg" title="Athens" alt="Athens">
<img src="images/small/9504449928.jpg" title="Florence" alt="Florence">
</div>
</main>
I also replaced var keyword since now is really indicated to use const and let for your variables.
inline style css link
Also notice how I just added and removed a class instead of manipulating the style one by one. Is way easier to maintain and read. Not to mention that inline styling is overwriting any other type of css. So if you want to change it later the only way is inline styling which can be annoying in certain circumstances.
query selector vs getDocumentById

Button not working in certain parts of my HTML

I have a button id="getstarted" located near the top and the bottom of my HTML. The button near the top works, but the one near the bottom does not work. They are formatted exactly the same. I want both buttons to work.
Here is my code.
**edited code. I added onclick="window.location.href = 'getstarted.html';" to my buttons. now the first button works, but the second one does not work. how do I get the second button to work?
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 70) {
$('#header').fadeIn(500);
} else {
$('#header').fadeOut(500);
}
});
});
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 70) {
$('#pricing').css("color", "#000");
} else {
$('#pricing').css("color", "#FFF");
}
});
});
// slideshow
$(document).ready(function() {
$("#laptopslideshop > div:gt(0)").hide();
setInterval(function() {
$('#laptopslideshop > div:first')
.fadeOut(500)
.next()
.fadeIn(500)
.end()
.appendTo('#laptopslideshop');
}, 3000);
});
#import url('https://fonts.googleapis.com/css?family=Nunito+Sans');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#header {
position: fixed;
top: 0px;
width: 100%;
height: 84px;
background-color: #FFFFFF;
color: #000;
z-index: 1;
display: none;
}
#media (max-width: 768px) {
#header {
height: 60px;
}
}
#main {
height: 100vh;
width: 100%;
background: url(Images/teamchat.jpg) no-repeat center;
background-size: contain;
background-size: cover;
}
.headerContents {
text-align: right;
height: 100%;
width: 100%;
float: right;
z-index: 2;
position: fixed;
}
.headerpandc {
margin-right: 18%;
margin-top: 17px;
position: relative;
}
#media (max-width: 768px) {
.headerpandc {
margin-right: 4%;
margin-top: 14px;
}
}
#pricing {
font-family: Nunito Sans;
margin-right: 55px;
font-weight: 800;
letter-spacing: 0.1em;
font-size: 18px;
text-decoration: none;
color: #FFF;
transition: 0.6s;
}
#media (max-width: 768px) {
#pricing {
font-size: 12px;
margin-right: 3%;
}
}
#media (max-width: 355px) {
#pricing {
display: none;
}
}
#pricing:hover {
text-decoration: underline;
}
#pricing:active {
color: #000;
}
#getstarted {
font-family: Nunito Sans;
background-color: #5a52ff;
border-radius: 10px;
border: none;
color: white;
padding: 11px 25px;
text-align: center;
font-size: 18px;
transition: 0.3s;
text-decoration: none;
cursor: pointer;
font-weight: 800;
letter-spacing: 0.05em;
outline: none;
}
#media (max-width: 768px) {
#getstarted {
padding: 8px 15px;
font-size: 12px;
}
}
#getstarted:hover {
background-color: #3d33ff;
}
#getstarted:active {
transform: translateY(2px);
box-shadow: 0 1px #666;
}
#telosdesignlogo {
float: left;
height: 30px;
margin-left: 18%;
margin-top: 6px;
}
#media (max-width: 768px) {
#telosdesignlogo {
margin-left: 4%;
height: 23px;
}
}
/*main text*/
#mainbox {
height: 470px;
width: 500px;
text-align: left;
position: relative;
top: 250px;
left: 28%;
font-family: Nunito Sans;
color: #FFF;
}
#hitelos {
font-size: 2.5em;
font-weight: lighter;
}
#maintext {
font-weight: 800;
font-size: 3.5em;
}
#mainpricing {
z-index: 5;
}
/* Laptop slideshow begins */
#laptopslideshop {
position: relative;
margin-top: 50px;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.mySlides {
position: absolute;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="header"></div>
<div class="headerContents">
<div class="headerpandc">
<a id="pricing" href="pricing.html">Pricing</a><button id="getstarted" onclick="window.location.href = 'getstarted.html';">Get Started</button>
<img src="Images/TelosLogo with text.png" href="index.html" alt="TelosDesign" id="telosdesignlogo" />
</div>
</div>
<div id="main">
<div id="mainbox">
<div id="hitelos">
Hi! We're Telos.
</div>
<div id="maintext">
Beautiful websites tailored to your unique business.
</div>
<button id="getstarted" onclick="window.location.href = 'getstarted.html';">Get Started</button>
</div>
</div>
<div id="laptopslideshop">
<div>
<img class="mySlides" src="Images/laptoppic1test.png" alt="Laptop and Phone" />
</div>
<div>
<img class="mySlides" src="Images/laptoppic2test.png" alt="Laptop and Phone" />
</div>
</div>
id should be unique to an element(just one), use a class instead
In your code you use javascript(jquery) to control href, not html, see onclick.
<button id="getstarted" onclick="window.location.href = 'getstarted.html';">
The javascript is taking in consideration only the first element because no other element with the same id should exist.
--
I see that you have also:
<script type="text/javascript" src="app.js"></script>
What this code is doing ?
Check the web browser console for JavaScript errors from other sources/code.
Try with this code
<a id="pricing" href="http://google.com">Pricing</a>
<button id="getstarted">Get Started</button>
<a href="index.html">
<img src="Images/TelosLogo with text.png" href="http://google.com" alt="TelosDesign" id="telosdesignlogo"></a>

Make selected text bold/unbold with jQuery

I'm trying to make a text editor that can bold, italic and underline text using jQuery without using any HTML
The problem is that I can't make a selected text bold, the console log outputs "execCommand is not a function", am I doing something wrong? How can I achieve what I'm trying to do?
Here is my code:
(function ($) {
$.fn.text_editor = function(options) {
this.each(function() {
var buttons = {
buttons: ['bold', 'italic', 'underline']
};
var parametres = $.extend(buttons, options);
// generated html
$("body").html("<div class=\"container\">");
$("body").append("<h1 style=\"padding-left:55px;\">text editor</h1>");
$("body").append("<textarea rows=\"10\" cols=\"50\"></textarea>");
$("body").append("<br>");
$("body").append("<div class=\"buttons\"");
$("body").append("<button id=\"bold\">gras</button>");
$("body").append("<button id=\"italic\">italic</button>");
$("body").append("<button id=\"barre\">underline</button>");
// js
$("bold").execCommand("bold");
$("italic").execCommand("italic");
$("underline").execCommand("underline");
console.log($("bold"));
});
};
})(jQuery);
$(document).ready(function() {
$("textarea").text_editor()
});
After some searching, I came acrossthis article.
and this code pen. https://codepen.io/souporserious/pen/xBpEj
hope this helps.
$('.wysiwyg-controls a').on('click', function(e) {
e.preventDefault();
document.execCommand($(this).data('role'), false);
});
$controls-color: #ADB5B9;
$border-color: #C2CACF;
* {
box-sizing: border-box;
}
.wysiwyg-editor {
display: block;
width: 400px;
margin: 100px auto 0;
}
.wysiwyg-controls {
display: block;
width: 100%;
height: 35px;
border: 1px solid $border-color;
border-bottom: none;
border-radius: 3px 3px 0 0;
background: #fff;
a {
display: inline-block;
width: 35px;
height: 35px;
vertical-align: top;
line-height: 38px;
text-decoration: none;
text-align: center;
cursor: pointer;
color: $controls-color;
}
[data-role="bold"] {
font-weight: bold;
}
[data-role="italic"] {
font-style: italic;
}
[data-role="underline"] {
text-decoration: underline;
}
}
[class^="menu"] {
position: relative;
top: 48%;
display: block;
width: 65%;
height: 2px;
margin: 0 auto;
background: $controls-color;
&:before {
#extend [class^="menu"];
content: '';
top: -5px;
width: 80%;
}
&:after {
#extend [class^="menu"];
content: '';
top: 3px;
width: 80%;
}
}
.menu-left {
&:before, &:after {
margin-right: 4px;
}
}
.menu-right {
&:before, &:after {
margin-left: 4px;
}
}
.wysiwyg-content {
max-width: 100%;
width: 100%;
height: auto;
padding: 12px;
resize: both;
overflow: auto;
font-family: Helvetica, sans-serif;
font-size: 12px;
border: 1px solid $border-color;
border-radius: 0 0 3px 3px;
background: #F2F4F6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wysiwyg-editor">
<div class="wysiwyg-controls">
<a href='#' data-role='bold'>B</a>
<a href='#' data-role='italic'>I</a>
<a href='#' data-role='underline'>U</a>
</i>
</i>
</i>
</div>
<div class="wysiwyg-content" contenteditable>
<b>Let's make a statement!</b>
<br>
<i>This is an italicised sentence.</i>
<br>
<u>Very important information.</u>
</div>
</div>
NOTE: this is not my code.
execCommand is an experimental function, and its an function of document and not html elements. You can however call this function as below -
$("#bold").document.execCommand("bold");
$("#italic").document.execCommand("italic");
$("#underline").document.execCommand("underline");

two functions interfering with each other

So my first stab at web development is proceeding reasonably well.
However... I want to have two separate drop down menus, but the JavaScript functions are interfering with each other... That is, if both functions are active at the same time, clicking on one drop down will cause the other drop down to react or stop working. It is probably something massively stupid, but I have little time left. here is the code:
//Control sliding menu on screens smaller than a specified breakpoint.
(function(menu_button, links, breakpoint)
{
"use strict";
var menulink = document.getElementById(menu_button),
menu = document.getElementById(links);
menu.className = "start";
setTimeout(function()
{
menu.className = "collapsed";
}, 20);
menuLink.onclick = function()
{
if (menu.className === "displayed")
{
menu.className = "collapsed";
}
else
{
menu.className = "displayed";
}
return false;
};
window.onresize = function()
{
if (window.innerWidth < breakpoint)
{
menu.className = "collapsed";
}
};
})("menuLink", "navLinks", 700);
That was function No.1, here is No.2:
function dropFunction()
{
"use strict";
document.getElementById("myDropdown").classList.toggle("drop");
}
window.onclick = function(e)
{
"use strict";
if (!e.target.matches('.dropbtn'))
{
var dropdowns = document.getElementsByClassName("dropdownContent");
for (var d = 0; d < dropdowns.length; d++)
{
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains("drop"))
{
openDropdown.classList.remove("drop");
}
}
}
}
and HTML if at all usefull:
<nav>
<p id="menuLink">MENU</p>
<ul class="displayed" id="navLinks">
<li>Home</li>
<li>Portfolio</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
<div class="dropdownContent" id="myDropdown">
<img class="externalLink" src="images/faceBook.png" style="width:20px">
<img class="externalLink" src="images/linkedIn.png" style="width:20px">
<img class="externalLink" src="images/soundCloud.png" style="width:20px">
</div>
and CSS:
.nav
{
display: inline;
position: absolute;
bottom: 220px;
padding-right: 60px;
width: 100%;
background-color: transparent;
font-family: "verdana";
font-size: 20px;
text-align: center;
}
.nav li
{
display: inline;
}
.nav a
{
display: inline-block;
padding: 50px;
text-decoration: none;
color: #E4E4E4;
}
.nav a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
.nav a:active
{
color: #5B4CA8;
}
li.drops
{
display: inline-block;
}
.dropdownContent
{
display: none;
position: absolute;
background-color: transparent;
box-shadow: none;
minimum-width: 20px;
}
.dropdownContent a
{
color: transparent;
text-decoration: none;
display: block;
text-align: center;
}
.drop
{
display: block;
}
#menuLink
{
width: 100%;
background-color: transparent;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
#menuLink a
{
text-decoration: none;
font-family: "helvetica";
color: #E4E4E4;
}
#menuLink a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
#menuLink a:active
{
color: #5B4CA8;
}
#navLinks
{
position: absolute;
list-style-type: none;
width: 100%;
background-color: transparent;
padding: 0;
margin: 0;
text-align: center;
z-index: 1;
opacity: 1;
-webkit-transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
}
#navLinks a
{
display: block;
padding: 10px;
font-family: "helvetica";
color: #E4E4E4;
text-decoration: none;
font-size: 18px;
}
#navLinks a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
#navLinks a:active
{
color: #5B4CA8;
}
#navLinks.start
{
display: none;
}
#navLinks.collapsed
{
top: -12em;
opacity: 0;
}
Thanks for your help!
You have used the window.Onlcick event to specify behaviors for the dropdowns if the user is not clicking on something with class "drop". This event will fire if you click on any item in that window because events bubble up like that in JavaScript.

Click function not working in slideshow

I'm making jQuery to click the Next and Previous span tab to control the image slideshow but it's not working.
function slideshow() {
var $active = $('div#slider-wrap img.active-img');
var $next = $active.next();
$next.addClass('active-img');
$active.removeClass('active-img');
}
$(function() {
setInterval(slideshow, 5000);
});
$('#tab-container a').on('click', function() {
var element = this.id;
console.log(element);
$('.images').trigger("slideshow", element);
});
/* next and previous jquery code */
$(document).ready(function() {
var divs = $('.images>img');
var now = 0; // currently shown div
divs.hide().first().show(); // hide all divs except first
$("#previous").click(function() {
divs.eq(now).hide();
now = (now + 1 < divs.length) ? now + 1 : 0;
divs.eq(now).show(); // show next
});
$("#next").click(function() {
divs.eq(now).hide();
now = (now > 0) ? now - 1 : divs.length - 1;
divs.eq(now).show(); // show previous
});
});
* {
margin: 0;
padding: 0;
}
#slider-wrap {
position: relative;
}
.slideshow .images {
width: 100%;
height: 350px;
overflow: hidden;
margin: 0 auto;
}
.slideshow .images img {
position: absolute;
width: 100%;
max-width: 960px;
height: auto;
}
.active-img {
z-index: 99;
}
#tab-container {
border-bottom: #ccc 1px solid;
border-top: #ccc 1px solid;
overflow: hidden;
width: 50%;
margin-top: 265px;
}
#tab-container span {
display: block;
float: left;
width: 42.995%;
padding: 10px 0;
text-align: center;
font-size: 12px;
text-transform: uppercase;
border-right: #ccc 1px solid;
letter-spacing: 1px;
font-family: 'corporate_condensed', sans-serif;
}
#tab-container a:nth-of-type(2) span {
border-right: 0;
}
#tab-container a,
#tab-container a:hover,
#tab-container a:active,
#tab-container a:visited {
text-decoration: none;
font-weight: bold;
color: #000;
cursor: pointer;
}
#tab-container span:hover {
color: #fff;
background: #444;
}
#tab-container span.active {
color: #fff;
background: #444;
}
#tab-container a span.active,
.c-slider #tab-container a:hover span.active,
.c-slider #tab-container a:active span.active,
.c-slider #tab-container a:visited span.active {
color: #fff;
}
#slider_time {
display: none;
}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div id="slider-wrap">
<div class="slideshow">
<div class="images">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/1.jpg" alt="" class="active-img">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/2.jpg" alt="">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/3.jpg" alt="">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/4.jpg" alt="">
</div>
</div>
</div>
<div id="tab-container">
<a><span id="previous" class="">Previous</span></a>
<a><span id="next"class="">Next</span></a>
</div>
<div style="clear:both"></div>
Previous and next tabs are not aligning properly with equal width. I'm having this problem all the time.

Categories