I am new to web development so please forgive for any shortcomings.
I have been working on a website for a project for a while now and now I have to add a specific countdown on it(Keith Wood Countdown) the "Pad with zeroes:" one.
The problem is that, I do not know how to set the target date on it to countdown to and how to attach it to a particular div.
I have searched the Internet and there are similar questions on stackoverflow but they are for an older version of this countdown. And nowhere is there any answer for how to attach it to a div.
Here's my code:
HTML:
<!DOCTYPE html>
<html class="html">
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>LMUN - Home</title>
<meta name="description" content=" Welcome to La Martiniere Model United Nations 2015">
<meta name="keywords" content="lmun,lucknow mun,la martiniere mun,la martiniere college,la martiniere model un,la martiniere model united nations,lmun 2015">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Slideshow *Starts* -->
<link rel="stylesheet" type="text/css" href="engine0/style.css" />
<script type="text/javascript" src="engine0/jquery.js"></script>
<!-- Slideshow *Ends* -->
</head>
<body>
<div class="brdr_top"></div> <!-- A little gold border at the top -->
<div class="header" id="banner">
<img src="images/Website_bannertxtcombo.png" id="banner_txtcombo"/> <!-- The LMUN text image -->
<img src="images/Logo_Blue_Small.png" id="banner_logo"/> <!-- The LMUN Logo -->
</div>
<div class="header" id="navbar"> <!-- The navigation bar and contents *begins* -->
<div class="nb_item"><span id="space"></span>HOME<span id="space"></span></div>
<div class="nb_item">ABOUT US <span id="dArrow"></span>
<ul id="abtus_menu">
<li class="nb_item_li"><span id="space2"></span>LA MARTINIERE COLLEGE</li>
<li class="nb_item_li"><span id="space2"></span>LMUN 2015</li>
<li class="nb_item_li"><span id="space2"></span>SECRETARIAT</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>REGISTER <span id="dArrow"></span>
<ul id="rgstr_menu">
<li class="nb_item_li"><span id="space2"></span>INDIVIDUAL</li>
<li class="nb_item_li"><span id="space2"></span>DELEGATION</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>COMMITTEES <span id="dArrow"></span>
<ul id="comt_menu">
<li class="nb_item_li"><span id="space2"></span>African Union</li>
<li class="nb_item_li"><span id="space2"></span>Arab League</li>
<li class="nb_item_li"><span id="space2"></span>SPECPOL</li>
<li class="nb_item_li"><span id="space2"></span>CCPCJ</li>
<li class="nb_item_li"><span id="space2"></span>UNSC</li>
<li class="nb_item_li"><span id="space2"></span>Ad - Hoc</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>RESOURCES <span id="space"></span></div>
<div class="nb_item">EVENTS <span id="dArrow"></span>
<ul id="evnt_menu">
<li class="nb_item_li"><span id="space2"></span>KEYNOTE SPEAKERS</li>
<li class="nb_item_li"><span id="space2"></span>SOCIALS</li>
</ul>
</div>
<div class="nb_item"><span id="space"></span>SPONSORS</div>
<div class="nb_item"><span id="space"></span>CONTACT US<span id="space"></span></div>
</div>
<div id="slideshow">
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container0">
<div class="ws_images"><ul>
<li><img src="data0/images/ff.jpg" alt="" title="" id="wows0_0"/></li>
<li><img src="data0/images/dsc_0160001.jpg" alt="jquery content slider" title="" id="wows0_1"/></li>
<li><img src="data0/images/la_martiniere_college_building,_lucknow.jpg" alt="" title="" id="wows0_2"/></li>
</ul></div>
<div class="ws_bullets"><div>
<span><img src="data0/tooltips/ff.jpg" alt=""/>1</span>
<span><img src="data0/tooltips/dsc_0160001.jpg" alt=""/>2</span>
<span><img src="data0/tooltips/la_martiniere_college_building,_lucknow.jpg" alt=""/>3</span>
</div></div><div class="ws_script" style="position:absolute;left:-99%">image carousel by WOWSlider.com v8.2</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine0/wowslider.js"></script>
<script type="text/javascript" src="engine0/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div id="countdown"></div>
</body>
</html>
I want to add the countdown to the countdown div.
padZeros is now padZeroes. I've inserted variable names for the year, month and day that the countdown approaches. You attach to the target <div> by calling $("#yourDivId").countdown() with the appropriate options.
$(function() {
var date = new Date();
var numYears = 0;
var month = 6;
var day = 28;
date = new Date(date.getFullYear() + numYears, month - 1, day);
$('#defaultCountdown').countdown({
until: date,
padZeroes: true
});
$('#year').text(date.toLocaleDateString());
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Countdown</title>
<link rel="stylesheet" href="http://keith-wood.name/css/jquery.countdown.css">
<style type="text/css">
body > iframe {
display: none;
}
#defaultCountdown {
width: 240px;
height: 45px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://keith-wood.name/js/jquery.plugin.js"></script>
<script src="http://keith-wood.name/js/jquery.countdown.js"></script>
</head>
<script>
$(function() {
var date = new Date();
var numYears = 0;
var month = 6;
var day = 28;
date = new Date(date.getFullYear() + numYears, month - 1, day);
$('#defaultCountdown').countdown({
until: date,
padZeroes: true
});
$('#year').text(date.toLocaleDateString());
});
</script>
<body>
<h1>jQuery Countdown Basics</h1>
Counting down to:
<div id="year"></div>
<div id="defaultCountdown"></div>
</body>
</html>
According to the documentation:
<script>
$(function() {
var mydate = new Date();
mydate = new Date(mydate .getFullYear() + 1, 11 - 1, 6);
$('#countdown').countdown({until: mydate });
]);
</script>
Add this code right before your closing </body> tag.
Related
We are building a simple web page to reproduce .mpd video using the dash.js player. Having a bit rate selector is a must, that is why we added controlbar.js to the video.
ControlBar is implementent properly as the bitrate selector shows the available bit rates. But when clicking on the we cannot see the difference.
We did a small research and having the player.setFastSwitchEnabled(true); function is recommended but this is the error we got:
Uncaught TypeError: player.setFastSwitchEnabled is not a function
at startVideo ((index):26)
at onload ((index):35)
at window.onload (jquery.waypoints.min.js:7)
How can we implement the function? Is any other action needed in order to make the bitrate change?
Do we need to connect the setQualityFor() function to this part of the code:
<li id="video-bitrate-listItem_0" class="menu-item-selected"> Auto Switch</li>
<li id="video-bitrate-listItem_1" class="menu-item-unselected">254 kbps (320x180)</li>
<li id="video-bitrate-listItem_2" class="menu-item-unselected">507 kbps (320x180)</li>
<li id="video-bitrate-listItem_3" class="menu-item-unselected">759 kbps (480x270)</li>
<li id="video-bitrate-listItem_4" class="menu-item-unselected">1013 kbps (640x360)</li>
<li id="video-bitrate-listItem_5" class="menu-item-unselected">1254 kbps (640x360)</li>
<li id="video-bitrate-listItem_6" class="menu-item-unselected">1883 kbps (768x432)</li>
<li id="video-bitrate-listItem_7" class="menu-item-unselected">3134 kbps (1024x576)</li>
<li id="video-bitrate-listItem_8" class="menu-item-unselected">4952 kbps (1280x720)</li>
<li id="video-bitrate-listItem_9" class="menu-item-unselected">9914 kbps (1920x1080)</li>
<li id="video-bitrate-listItem_10" class="menu-item-unselected">14931 kbps (3840x2160)</li>
</ul>
Please, find the index.html attached below:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Video Europea</title>
<meta name="description" content="">
<link rel="stylesheet" href="http://reference.dashif.org/dash.js/latest/contrib/akamai/controlbar/controlbar.css">
<!-- Links apariencia -->
<script class="code"
src="http://reference.dashif.org/dash.js/latest/contrib/akamai/controlbar/ControlBar.js"></script>
<script class="code" src="http://reference.dashif.org/dash.js/latest/dist/dash.all.debug.js"></script>
<script class="code">
function startVideo() {
const url = 'http://videoeuropea.es/videos/Feria_DASH/Feria.mpd';
var videoElement = document.querySelector(".videoContainer video");
var player = dashjs.MediaPlayer().create();
player.initialize(videoElement, url, true);
var controlbar = new ControlBar(player);
controlbar.initialize();
player.setFastSwitchEnabled(true);
}
</script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
</head>
<body onload="startVideo()" data-spy="scroll" data-target=".site-navbar-target" data-offset="100">
<div class="dash-video-player code">
<!-- HTML structure needed for the ControlBar -->
<div class="videoContainer" id="videoContainer">
<video preload="auto" autoplay="" src="blob:http://reference.dashif.org/682c3720-89f2-4987-8f30-494795fa6b10">
</video>
<div id="videoController" class="video-controller unselectable">
<div id="playPauseBtn" class="btn-play-pause" title="Play/Pause">
<span id="iconPlayPause" class="icon-play"></span>
</div>
<span id="videoTime" class="time-display">00:00</span>
<div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
<span class="icon-fullscreen-enter"></span>
</div>
<div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
<span class="icon-bitrate"></span>
</div>
<input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01">
<div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
<span id="iconMute" class="icon-mute-off"></span>
</div>
<div id="trackSwitchBtn" class="control-icon-layout hide" title="A/V Tracks">
<span class="icon-tracks"></span>
</div>
<div id="captionBtn" class="btn-caption control-icon-layout hide" title="Closed Caption">
<span class="icon-caption"></span>
</div>
<span id="videoDuration" class="duration-display">00:00:00</span>
<div class="seekContainer">
<div id="seekbar" class="seekbar seekbar-complete">
<div id="seekbar-buffer" class="seekbar seekbar-buffer"></div>
<div id="seekbar-play" class="seekbar seekbar-play"></div>
</div>
</div>
<div id="bitrateMenu" class="menu hide unselectable menu-item-unselected" style="left: 550px; top: 364px;">
<div id="video">
<div class="menu-sub-menu-title">Video</div>
<ul id="videoContent" class="video-menu-content">
<li id="video-bitrate-listItem_0" class="menu-item-selected"> Auto Switch</li>
<li id="video-bitrate-listItem_1" class="menu-item-unselected">254 kbps (320x180)</li>
<li id="video-bitrate-listItem_2" class="menu-item-unselected">507 kbps (320x180)</li>
<li id="video-bitrate-listItem_3" class="menu-item-unselected">759 kbps (480x270)</li>
<li id="video-bitrate-listItem_4" class="menu-item-unselected">1013 kbps (640x360)</li>
<li id="video-bitrate-listItem_5" class="menu-item-unselected">1254 kbps (640x360)</li>
<li id="video-bitrate-listItem_6" class="menu-item-unselected">1883 kbps (768x432)</li>
<li id="video-bitrate-listItem_7" class="menu-item-unselected">3134 kbps (1024x576)</li>
<li id="video-bitrate-listItem_8" class="menu-item-unselected">4952 kbps (1280x720)</li>
<li id="video-bitrate-listItem_9" class="menu-item-unselected">9914 kbps (1920x1080)</li>
<li id="video-bitrate-listItem_10" class="menu-item-unselected">14931 kbps (3840x2160)</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/aos.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I think you are using older version of ControlBar.js. See that you take latest code from here.
setFastSwitchEnabled has been removed.
Now you need to do the following to set quality manually.
Call getSettings() on your player to get settings.
Set settings.streaming.abr.autoSwitchBitrate = false.
User player.setQuality() to set quality from bitrateList.
I am a refactoring code for a website I am making and I am trying to use Flexslider jQuery plugin instead of AnythingSlider plugin I was originally used. I downloaded the plugin and followed the directions on the website (Flexslider website) for how to get started with the plugin. However, the pictures in the ul class "slides" are still in a list form and don't appear as a slideshow. Here is my current code:
$(document).ready(function(){
/*
alert('Our JavaScriipt is working!');
console.log('Our Javascript is working!');
console.warn('A dire warning!');
console.error('ERMAGERD AN ERROR!');
*/
var modalContainer = $("#modal-container");
var hideModal = function() {
modalContainer.hide();
};
var showModal = function() {
modalContainer.show();
};
var modalShowButton = $("#modal-show");
modalShowButton.on("click", showModal);
var modalCloseButton = $("#modal-hide");
modalCloseButton.on("click", hideModal);
$(document).on("keyup", function(evt) {
evt = evt || window.event;
if (evt.keyCode === 27) {
hideModal();
}
});
var handleNewsletterSignup = function(evt) {
evt.preventDefault();
var newsletterHeader = $("#newsletter-header");
var newsletterForm = $("#newsletter-signup");
newsletterForm.hide();
newsletterHeader.text("Thank you for signing up!");
setTimeout(hideModal, 2000);
};
var newsletterForm = $("#newsletter-signup");
newsletterForm.on("submit", handleNewsletterSignup);
/* Begin the clock code */
var clockTime = function() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
if (hours <= 11) {
var period = "AM";
} else {
var period = "PM";
}
if (hours > 12) {
hours = hours - 12;
} else if (hours === 0) {
hours = 12;
}
if (minutes < 10) {
minutes = "0" + String(minutes);
}
if (seconds < 10) {
seconds = "0" + String(seconds);
}
var time = hours + ':' + minutes + ':' + seconds + ' ' + period;
return time;
}
var clock = $("#clock");
setInterval(function() {
clock.text(clockTime());
}, 1000);
});
<head>
<title>Liz Lemon's Personal Website</title>
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Open+Sans:400italic,400,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jQuery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({;
animation: "slide",
animationLoop: true,
slideshow: true;
randomize: false,
});
});
</script>
</head>
<body>
<div class="page">
<header>
<h1>Liz Lemon's Personal Website</h1>
<img id="headshot" src="http://i284.photobucket.com/albums/ll14/britishpandachick/liz-lemon_zps6qncghn4.jpg" alt="Headshot">
</header>
<h4>
The current time is...
<span id="clock">Clock goes here</span>
</h4>
<blockquote id="greeting">This is where the JavaScript greeting goes...</blockquote>
<section id="bio">
<h2>About me</h2>
<p>Here is a paragraph all about how awesome I am. Don't you <em>love</em> to read about me? Hmm, not so much? Well, then replace this paragraph with some information about <strong>yourself</strong>! Or you can go read some fun articles on Skillcrush.
</p>
</section>
<div class="flexslider">
<ul class="slides">
<li><img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/></li>
<li><img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/></li>
<li><img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/></li>
</ul>
</div>
<section id="contact">
<h2>Contact</h2>
<div id="social-icons">
<a href="#">
<img src="http://i284.photobucket.com/albums/ll14/britishpandachick/twitter_zpsulfh8can.png" alt="Twitter icon">
</a>
</div>
</section>
<button id="modal-show">Join the Lemon List</button>
<div id="modal-container">
<section id="modal-box">
<button id="modal-hide">x</button>
<h2 id="newsletter-header">Sign up for my email list!</h2>
<form id="newsletter-signup" action="#" method="post" accept-charset="utf-8">
<input type="email" name="email" value="" placeholder="Your email">
<input type="submit" value="Sign up">
</form>
</section>
</div>
<footer>
<p>© Skillcrush 2014</p>
</footer>
</div>
</body>
So far I have triple checked every single part of my code (especially what is in the head) with the sample ones on the website and github. I also tried moving some of the JS to the JS file. Despite these changes, the pictures in slides class remain a bullet point list. Did I link the wrong files for flexslider? I think my issue is with the HTML section, but I'm not 100% positive since my code looks the same as the ones on the sample page.
I think error in your CSS and JS inclusion.
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jQuery.flexslider.js"></script>
Like it should be:
<script type="text/javascript" src="http://www.domain.com/myphysicaldirectory/js/jQuery.flexslider.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.domain.com/myphysicaldirectory/css/flexslider.css" media="all" />
Set your JS and CSS Path properly and open your source code (ctrl + u) and check its include properly or not. also check included path open correctly in browser or not.
When you download flexslider zip file then inside that demo folder, create one test.html file and add below code in it.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>Liz Lemon's Personal Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- Demo CSS -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />
<!-- Modernizr -->
<script src="js/modernizr.js"></script>
</head>
<body class="loading">
<div id="container" class="cf">
<header>
<h1>Liz Lemon's Personal Website</h1>
<img id="headshot" src="http://i284.photobucket.com/albums/ll14/britishpandachick/liz-lemon_zps6qncghn4.jpg" alt="Headshot">
</header>
<h4>
The current time is...
<span id="clock">Clock goes here</span>
</h4>
<blockquote id="greeting">This is where the JavaScript greeting goes...</blockquote>
<section id="bio">
<h2>About me</h2>
<p>Here is a paragraph all about how awesome I am. Don't you <em>love</em> to read about me? Hmm, not so much? Well, then replace this paragraph with some information about <strong>yourself</strong>! Or you can go read some fun articles on Skillcrush.
</p>
</section>
<div id="main" role="main">
<section class="slider">
<div class="flexslider carousel">
<ul class="slides">
<li>
<img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
</li>
<li>
<img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
</li>
<li>
<img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
</li>
<li>
<img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
</li>
<li>
<img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
</li>
<li>
<img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
</li>
<li>
<img src="http://images4.fanpop.com/image/photos/14900000/S1-Promotional-Photos-Liz-Lemon-liz-lemon-14945184-1071-1500.jpg" alt="professional_pic"/>
</li>
<li>
<img src="http://i.huffpost.com/gen/1362193/original.jpg" alt="fun_pic"/>
</li>
<li>
<img src="http://cdn.pastemagazine.com/www/blogs/lists/lizlemonthumbs.jpg" alt="thumbs_up"/>
</li>
</ul>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<div id="social-icons">
<a href="#">
<img src="http://i284.photobucket.com/albums/ll14/britishpandachick/twitter_zpsulfh8can.png" alt="Twitter icon">
</a>
</div>
</section>
<button id="modal-show">Join the Lemon List</button>
<div id="modal-container">
<section id="modal-box">
<button id="modal-hide">x</button>
<h2 id="newsletter-header">Sign up for my email list!</h2>
<form id="newsletter-signup" action="#" method="post" accept-charset="utf-8">
<input type="email" name="email" value="" placeholder="Your email">
<input type="submit" value="Sign up">
</form>
</section>
</div>
<footer>
<p>© Skillcrush 2014</p>
</footer>
</div>
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<!-- FlexSlider -->
<script defer src="../jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 420,
itemMargin: 1,
pausePlay: true,
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
</body>
</html>
I already test it. its running fine.
I need to convert this working filter gallery from JavaScript JQuery. I'm a complete novice in both these languages so I was hoping someone could give me a little help. Below is the JavaScript that will have to be converted,
(function() {
var filterButtons = document.querySelectorAll(".filterList a");
imageNodes = document.querySelectorAll("img");
console.log(filterButtons, imageNodes);
function staggerImage() {
TweenMax.staggerFromTo(imageNodes, 0.7, {opacity:0}, {opacity:1}, 0.3);
}
function doImageSwitch(event) {
console.log("fire");
console.log(event.target.parentNode.id);
for(i=0; i<imageNodes.length; i++) {
imageNodes[i].style.display = "inline";
if(!imageNodes[i].classList.contains(event.target.parentNode.id)) {
imageNodes[i].style.display = "none";
}
}
staggerImage();
}
[].forEach.call(filterButtons, function(el) {
el.addEventListener("click", doImageSwitch, false);
});
staggerImage();
})();
And this is the HTML code I have set up,
<?php
include './includes/functions.php';
$conn = connect($config);
$result = mysqli_query($conn, "SELECT * FROM main_content");
//echo mysqli_num_rows($result); ?>
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Filter Gallery</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Something</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Right Button with Dropdown
<ul class="dropdown filterList">
<li id="flower">Flower </li>
<li id="puppy" >Puppy </li>
<li id="kitten" >Kitty </li>
</ul>
</li>
</ul>
</section>
</nav>
<div class="row">
<div class="small-12 columns text-center">
<div class="images">
<?php
while($row = $result -> fetch_assoc()) {
echo "<img class=\"{$row['img_class']}
img-responsive\" src=\"img/{$row['img_src']}\"
alt=\"{$row['img_alt']}\">";
}
?>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script src="js/myScript.js"></script>
</body>
</html>
Any help would be greatly appreciated. Thank you!
Did you write the javascript code yourself? If so it should not be a problem finding the answer. StackOverflow is as said not a coding service. I can try to help you, but I will not be wasting time on this question if it's for homework or some programming job ;)
If you first try to convert the code, I will be happy to help you (try).
the following uses an html structure that is presumably the same as your php echo output.
(function() {
// Selecting all of the img tags within the document that have to be changed
var imageNodes = $(".images img");
// TweenMax syntax stays the same
function staggerImage() {
TweenMax.staggerFromTo(imageNodes, 0.7, {opacity:0}, {opacity:1}, 0.3);
}
$(".filterList a").on("click", function(e) {
console.log("fire");
// parent() - http://api.jquery.com/parent/
//console.log('This: %o - Parent - %o - ParentId - %o', $(this), $(this).parent(), $(this).parent().attr("id"));
var parentId = $(this).parent().attr("id");
// [parentId] will be used as a scoped variable on the nested anonymous function declared in [.each] below.
// .each([array],func) | [array].each(func) - http://api.jquery.com/jquery.each/
$(imageNodes).each(function(index, value) {
console.log("index: %o | value: %o | parentId: %o", index, value, parentId);
// .hasClass([string]) - http://api.jquery.com/hasclass/
if($(value).hasClass(parentId))
{
$(value).css("display","inline");
} else {
$(value).css("display","none");
}
});
staggerImage();
});
staggerImage();
})();
img {width:5em; height:5em;border:0.1em solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Something</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Right Button with Dropdown
<ul class="dropdown filterList">
<li id="flower">Flower </li>
<li id="puppy" >Puppy </li>
<li id="kitten" >Kitty </li>
</ul>
</li>
</ul>
</section>
</nav>
<div class="row">
<div class="small-12 columns text-center">
<div class="images">
<img class="flower img-responsive" src="img/test.png" alt="flower 1" />
<img class="flower img-responsive" src="img/test.png" alt="flower 2" />
<img class="puppy img-responsive" src="img/test.png" alt="puppy 1" />
<img class="flower img-responsive" src="img/test.png" alt="flower 3" />
<img class="kitten img-responsive" src="img/test.png" alt="kitten 1" />
<img class="puppy img-responsive" src="img/test.png" alt="puppy 3" />
</div>
</div>
</div>
jsFiddle: http://jsfiddle.net/1m4LmLhx/1/
pastebin: http://pastebin.com/bfDL5NLU
Note: when you click on the hyperlinks, that we've attached click event handlers to, the viewport is being directed back to the top of the page.. this is usually undesirable, but it seems to be outside of the scope of this question to address that behavior.
OK, so here's my issue (it must be simple, but I still cannot figure this one out)...
I've got a sample HTML code like the one below :
<!-- New Website #1 -->
<!DOCTYPE html>
<html style='min-height:0px;'>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile.min.css" />
<link rel="stylesheet" href="custom.css" />
<link rel="stylesheet" href="dev.css" />
</head>
<body id="jqm-website-6926" class="" >
<!-- New Page #1 -->
<div data-role="page" comp-id="jqm-page-6271" id="jqm-page-6271" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >
<!-- New Header #1 -->
<div data-role="header" comp-id="jqm-header-364" id="jqm-header-364" class="" data-position="" data-fullscreen="false" data-theme="" >
<h1></h1>
</div>
<!-- / New Header #1 -->
<!-- New Content #1 -->
<div data-role="content" comp-id="jqm-content-3537" id="jqm-content-3537" class="" data-theme="" >
<!-- New Button #1 -->
<div comp-id="jqm-button-1547" >
<a data-role="button" id="jqm-button-1547" class="" data-corners="true" data-icon="" data-iconpos="left" data-iconshadow="true" data-inline="false" data-mini="false" data-shadow="true" data-theme="" href="#" data-transition="(null)">
</a>
</div>
<!-- / New Button #1 -->
</div>
<!-- / New Content #1 -->
</div>
<!-- / New Page #1 -->
<!-- New Page #1 -->
<div data-role="page" comp-id="jqm-page-9207" id="jqm-page-9207" class="" data-add-back-btn="false" data-back-btn-text="" data-back-btn-theme="" data-dom-cache="false" data-theme="" data-title="" >
</div>
<!-- / New Page #1 -->
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
<script src="custom.js"></script>
<script src="dev.js"></script>
</body>
</html>
<!-- / New Website #1 -->
All I want to do is when a specific element, with the comp-id attribute set, is clicked - we highlight (by adding the msp-selected class) just that specific element.
However, this is not working...
This is what I've tried :
function removeAll()
{
$("[comp-id]").each(function() {
if ($(this)!==undefined) {
$(this).removeClass("msp-selected");
}
});
}
$(document).ready( function() {
$('[comp-id]:not(.msp-selected)').on('click', function(e) {
removeAll();
$(this).addClass('msp-selected');
});
});
However, here's the problem :
When clicking on the button (comp-id="jqm-button-1547")
It highlights : a) first the button, b) then jqm-content-3537, c) then jqm-page-6271
In a few words, in the end, the 'page' is highlighted, instead of the button.
Any ideas?
And here's a fiddle : http://jsfiddle.net/CTZD3/
Maybe you can stop the event to be propagated to parents elements with event.stopPropagation();
$(document).ready( function() {
$('[comp-id]:not(.msp-selected)').on('click', function(e) {
removeAll();
e.stopPropagation();
$(this).addClass('msp-selected');
});
});
I'm applying a CSS class using .addClass when a tab is selected and it is also adding the class to the parents parent tab. The class is being added but the CSS doesn't seem to be taking effect of the parents parent class (apologies if that sounds awkward).
CSS:
.selectedTab{
color:#234 !important;
background-color:white !important;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Visit Northern Ireland</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="js/common.js"></script>
<script src="js/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/accordion.css">
<link rel="stylesheet" type="text/css" href="css/armagh.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<div id="centeredPane">
<nav>
<ul id="css-tabs">
<li>Home</li>
<li>Activities
<div class="subnav" id="activitiesLink">
Co. Armagh
Co. Antrim
Co. Down
Co. Fermanagh
Co. Londonderry
Co. Tyrone
</div>
</li>
<li>Restaurants
<div class="subnav" id="restaurantLink">
Indian
Tapas
American
Italian
</div>
</li>
<li>Game</li>
</ul>
</nav>
<div class="content" id="home">home</div>
<div class="content" id="armagh">armagh</div>
<div class="content" id="antrim">antrim</div>
<div class="content" id="down">down</div>
<div class="content" id="fermanagh">fermanagh</div>
<div class="content" id="londonderry">londonderry</div>
<div class="content" id="tryone">tyrone</div>
<div class="content" id="indian">indian</div>
<div class="content" id="tapas">tapas</div>
<div class="content" id="american">american</div>
<div class="content" id="italian">italian</div>
<div class="content" id="game">game</div>
<footer>For more information visit Discover Northern Ireland</footer>
</div>
</body>
</html>
jQuery:
$('.contentLinks').click(function() {
$(this).addClass("selectedTab");
$('a').not(this).removeClass("selectedTab");
//var is_element_li = $(this).parent().parent().get(0).tagName.is("li");
var is_element_li = $(this).parent().parent().is("li");
if(is_element_li){
$(this).parent().parent().addClass("selectedTab");
}
var nameAttribute = $(this).attr('name');
nameAttribute = "#"+ nameAttribute;
$(nameAttribute).show();
$('div.content').not(nameAttribute).hide();
});
How can I get the style to apply?
You need to add the selectedTab class to your anchor element, instead of the the li element:
$(this).parent().parent().children("a").addClass("selectedTab");