Uikit 3 Load more jQuery

Uikit 3 Load more jQuery - javascript

I have a problem with Uikit 3 Grid and jQuery and load more function.
The load more script is based on:
https://www.jqueryscript.net/demo/load-more-single-button/
The button hides after load other 3 DIV´s, here is the code pen:
https://codepen.io/joomlaplates/pen/BapvQre
BTW: That happens only when masonry is activated in Uikit: <div uk-grid="masonry: true">...</div>
I would really appriciate some help..
Thanks Peter

I have to be honest, I don't use Uikit much, but inspecting your example code I noticed that Uikit forces you the height of the div contents based on the width of the screen.
so, to solve, just bypass that rule via CSS .. :)
.contents{
height: auto!important;
}
and below I leave you a small demo of the fix .. :)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.contents{
height: auto!important;
}
</style>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/uikit#3.6.20/dist/css/uikit.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.5.2/minty/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/uikit#3.6.20/dist/js/uikit.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
/* Button Load more - v1.0.0 - 2018-02-28
* Copyright (c) 2018 NTTPS; */
(function ($) {
$.fn.btnLoadmore = function (options) {
var defaults = {
showItem: 6
, whenClickBtn: 3
, textBtn: 'Loadmore ...'
, classBtn: ''
, setCookies: false
, delayToScroll: 2000,
}
, options = $.extend(defaults, options);
this.each(function () {
var $this = $(this)
, $childrenClass = $($this.children());
// Get Element Of contents to hide
$childrenClass.hide(); // nascondi tutti gli elementi
//Show Element from Options
$childrenClass.slice(0, defaults.showItem)
.show(); // mostra il primo
//Show Button when item in contents != 0
if ($childrenClass.filter(":hidden")
.length > 0) {
$this.after('<button type="button" class="btn-loadmore ' + defaults.classBtn + '">' + defaults.textBtn + '</button>')
}
$(document).on('click', '.btn-loadmore', function (e) {
e.preventDefault();
$childrenClass.filter(':hidden').slice(0, defaults.whenClickBtn).slideDown();
if ($childrenClass.filter(":hidden").length == 0) {
$(".btn-loadmore").fadeOut('slow');
}
scrollDown();
});
function scrollDown() {
$('html, body')
.animate({
scrollTop: $childrenClass.filter(":visible")
.last()
.offset()
.top
}, defaults.delayToScroll);
}
});
}
}(jQuery));
$(document)
.ready(function () {
$('.contents')
.btnLoadmore({
showItem: 3,
whenClickBtn: 3,
textBtn: 'Load more...',
classBtn: 'btn btn-danger'
});
});
</script>
</head>
<body>
<div style="max-width:800px;margin-top:20px; margin:0 auto">
<div class="contents uk-child-width-1-2#s uk-child-width-1-3#m" uk-grid="masonry: true">
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 100px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 130px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 150px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 160px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 120px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 200px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 180px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Item</div>
</div>
</div>
</div>
</body>
</html>

Related

jQuery caoursel slider not updating width on window resize

I've recently added a slider to my page and after some tweaking it works fine apart from one issue - when I resize the window, specifically make it smaller, the slider is not centered anymore and at low resolution on firefox the arrows go outside the window, here's the code for the slider
$(function () {
console.log('DOM1');
$(document).ready(function () {
var speed = 6000;
var run = setInterval(rotate, speed);
var slides = $('.slide');
var container = $('#slides ul');
var width = $('#slides ul');
var elm = container.find(':first-child').prop("tagName");
var item_width = container.width();
var prev = 'prev'; //id of previous button
var next = 'next'; //id of next button
slides.width(item_width); //set the slides to the correct pixel width
container.parent().width(item_width);
container.width(slides.length * item_width); //set the slides container to the correct total width
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
$('#buttons a').click(function (e) {
if (container.is(':animated')) {
return false;
}
if (e.target.id === prev) {
container.stop().animate({
'left': 0
}, 1000, function () {
container.find(elm + ':first').before(container.find(elm + ':last'));
resetSlides();
});
}
if (e.target.id === next) {
container.stop().animate({
'left': item_width * -2
}, 1000, function () {
container.find(elm + ':last').after(container.find(elm + ':first'));
resetSlides();
});
}
return false;
});
$('#carousel').mouseenter(function () {
clearInterval(run);
}).mouseleave(function () {
run = setInterval(rotate, speed);
});
function resetSlides() {
container.css({
'left': -1 * item_width
});
}
});
function rotate() {
$('#next').click();
}
});
#carousel {
position: relative;
width:100%;
margin-top: 10px;
flex-basis: 100%;
display: flex;
justify-content: center;
}
.btn-bar{
position: absolute;
width: 100%;
#media only screen and (max-width: 1200px) {
width: 100%;
}
z-index: 4;
}
#buttons a {
position: absolute;
text-align:center;
display:block;
font-size:50px;
float:left;
outline:0;
margin:-50px 60px;
color:#FFFFFF;
text-decoration:none;
padding:9px;
width:35px;
}
a#prev{
cursor: pointer;
left: 0;
width: 40px;
height: 40px;
border-bottom: 1px solid white;
border-left: 1px solid white;
transform: rotate(45deg);
#media only screen and (max-width: 720px) {
display: none;
}
}
a#next{
cursor: pointer;
right: 0;
width: 40px;
height: 40px;
border-top: 1px solid white;
border-right: 1px solid white;
transform: rotate(45deg);
#media only screen and (max-width: 720px) {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<title>OHIR — Imprint Media</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="shortcut icon" href="images/3d5bb643659eb0b2a80acbe35c5073e5.png">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="container">
<div class="logo" id="OVERLAY"></div>
<div class="ohir"><p class="col">OHIR</p></div>
<nav class="col">
Książka
Fragment
Autor
<button>KUPUJĘ</button>
</nav>
</div>
<section class="OVERLAY hidden">
<a>MODERNIST CUISINE</a>
<a>IMPRINT MEDIA</a>
<a>WYDAWNICTWO BARBELO</a>
<button onclick="hideOverlayFunction()">POWRÓT</button>
</section>
</header>
<main>
<button onclick="topFunction()" id="myBtn" title="Go to top"><img src="images/arrow_up.svg"></button>
<section class="container OHIR">
<p>OHIR</p>
</section>
<section class="container ONBOARD">
<div class="book"></div>
<!--<img class='col' src="images/62d204dec2048b53e33842d869865586.png">-->
<div class="border">
<p> > Witaj na pokładzie Ohira.</p>
<p> > Kiedy będziesz gotowy na podróż w nieznane?</p>
<button>KUPUJĘ</button>
</div>
<div id="carousel">
<div class="btn-bar">
<div id="buttons"><a id="prev" onclick="prevFunction()"></a><a id="next" onclick="nextFunction()"></a> </div>
</div>
<div id="slides">
<ul>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">Tak bardzo chciałbym odrodzić się jako Ohir.</span>
</p>
</div>
<div class="authorContainer">
<p class="quote-author HAL">HAL 9000</p>
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">
Po przeczytaniu Ohira zbudowałem mój pierwszy ścigacz.</p>
</div>
<div class="authorContainer">
<p class="quote-author">Anakin Skywalker</p>
</div>
<div class="counter">
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"></span>Chciałbym, żeby mój następny statek był taki, jak Ohir.</p>
</div>
<div class="authorContainer">
<p class="quote-author">Kapitan Jean-Luc Picard</p>
</div>
<div class="counter">
</div>
</li>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase">Gdybym znów miał walczyć z cylinami, chciałbym mieć Ohira we flocie.</p>
</div>
<div class="authorContainer">
<p class="quote-author">Admirał William Adama</p>
</div>
</li>
</ul>
</div>
<div class="counter">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</section>
<a class="anchor" id="STORY"></a>
<section class="container STORY">
<video id="videoStory" onpause="pauseFunction()">
<source src="video/Ohir_fb%20video%20cover.mp4" type="video/mp4">
</video>
<button onclick="playFunction()" id="playBtn" title="play video">OHIR, OPOWIEDZ MI O KSIĄŻCE</button>
</section>
<section class="container FRAGMENT">
<a class="anchor" id="FRAGMENT"></a>
<div class="book"></div>
<div class="col">
<h3>ZAINTERESOWANY?</h3>
<p>Przeczytaj darmowy fragment i dowiedz się jak zaczyna się przygoda z Ohirem. Wpisz swój adres e-mail, aby otrzymać PDF</p>
<!--<input type="email" placeholder="e-mail">-->
<form action="http://YOURWEBSITE/index.php?option=com_acymailing&ctrl=sub" method="post">
<input id="user_email" type="text" name="user[email]" value="" placeholder="e-mail" />
</form>
<button>PROSZĘ O FRAGMENT</button>
</div>
<div class="AUTHOR">
<a class="anchor" id="AUTHOR"></a>
<h3>SZCZEPAN AUGUST URAWSKI</h3>
<span><p>Autor Ohira. Urodzony drogą naturalną w Warszawie, niemodyfikowany, bez dotacji unijnych. Rocznik 1983. Losy poprowadziły go ku ziemiom obcym, gdzie pracuje, tęskni, marzy i pisze. Pisał od kiedy pamięta. Bywały to scenariusze. Ku jego zaskoczeniu powstała też ogromna i fascynująca powieść SF.</p></span>
</div>
</section>
<section class="mobile author">
<div class="mobileAUTHOR">
<h3>SZCZEPAN AUGUST URAWSKI</h3>
<span><p>Autor Ohira.<br> Urodzony drogą naturalną w Warszawie, niemodyfikowany, bez dotacji unijnych. Rocznik 1983. Losy poprowadziły go ku ziemiom obcym, gdzie pracuje, tęskni, marzy i pisze. Pisał od kiedy pamięta. Bywały to scenariusze. Ku jego zaskoczeniu powstała też ogromna i fascynująca powieść SF.</p></span>
</div>
</section>
<section class="container SHOP">
<div class="book"></div>
<div class="border">
<h3>KUP KSIĄŻKĘ</h3>
<span> > Piękne wydanie Ohira</span>
<span> > 432 strony tekstu</span>
<span> > Sprawna i tania wysyłka kurierska za 9.90</span>
<h2 class="price">30 PLN</h2>
<button>KUPUJĘ</button>
</div>
</section>
<section class="container FOUR">
<div class="book"></div>
<div class="border">
<h3>ZESTAW CZTERECH KSIĄŻEK</h3>
<span> > Cztery książki drukowane</span>
<span> > 432 stron każda</span>
<span> > Sprawna i tania wysyłka kurierska za 9.90</span>
<div class="priceROW"><h2 class="price">99 PLN </h2><button>KUPUJĘ</button></div>
</div>
</section>
</main>
<footer>
<img class="col" src="./images/Imprint%20Media_logo.svg">
<span>
<p><b>Imprint Media Agencja Wydawnicza</b></p>
<p>ul. Chmielna 2/31</p>
<p>00-020 Warszawa</p>
</span>
<div class="line"></div>
<span>
<p>Znajdź nas na Facebooku!</p>
<p>tel. 22 24 15018</p>
<p>sklep#imprintmedia.pl</p>
</span>
<div class="line"></div>
<span>
<p>Jak wydać książkę?</p>
<p>Poznaj ofertę Imprint Media</p>
<p>Projektowanie i dystrybucja książek</p>
</span>
</footer>
</body>
I really need help with this, if anyone could help me, that would be great.
Thank you!

How do I randomize images and audio while making sure to keep divs attatched in Javascript?

This is the site in question: driglight.com/Learn5.html
The purpose of this site is to click the audio and then choose which image you believe to be the correct representation of the note that was played.
I want to randomize the audio and answers every time the page is refreshed.
When the audio is randomized I need to make sure that the audio that is chosen has it's matching correct answer of an image also chosen and placed randomly among the answers. Also,when any possible answer image is clicked, a div will appear that says 'Good Job!' or 'incorrect'. So when the correct answer is randomized it will need to have the 'Good Job' div to follow it.
Here is the code in html:
<!DOCTYPE html>
<head>
<title>Learn</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/stuff.js"></script>
<!-- <script src="js/Timhasnoinput.js"></script> -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="header-wrapper">
<div class="container">
<div class="row-fluid">
<div class="site-name">
<h1>Music Website</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="menu">
<div class="navbar">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<i class="fw-icon-th-list"></i>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Learn</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">→ Hello</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">About</option>
<option value="#">Learn</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12 ">
<div class="main-caption">
<h1>Music Website</h1>
<h6>Learning Music</h6>
</div>
<div class="Timmy2">
<h4>< Lesson 2</h4>
<h6></h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12">
<div class="banner">
<div class="audiobuttonholder">
<div class="audioholder" style="padding-bottom:24px;">
<audio controls id="audio1">
hello
</audio>
</div>
<div class="buttonholder"; style="position: absolute; left: 10px; top: 40px;">
</div>
<div class = "numberPage">
Pg. 3 Trebble Cleff
</div>
<div class = "control">
<ul>
<div id="div1" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
<img id=div1image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage1" style="height:200px;width:200px;
onclick="showDivOne()" />
</ul>
<ul>
<div id="div2" style="display:none; float: right; margin-right: 120px;" >
<img id=div2image imageC="incorrect.png" src="incorrect.png" />
</div>
<input type="image" id="myimage2" style="height:200px;width:200px; padding-
top:24px;" onclick="showDivTwo()"/>
</ul>
<ul>
<div id="div3" style="display:none; float: right; margin-right: 120px;
padding-top: 40px;" >
<img id=div3image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage3" style="height:200px;width:200px;padding-
top:24px;" onclick="showDivThree()"/>
</ul>
<ul>
<div id="div4" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
<img id=div4image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage4" style="height:200px;width:200px;"
onclick="showDivFour()" />
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="featured-images">
<ul class="grid effect-8" id="grid">
<li>
<div class="block">
<div class="Timmy2">
<h4>< Lesson 2</h4>
<h6></h6>
</div>
</div>
</li>
</ul>
<div class="block-content">
<div class="user-info">
<h4>Home</h4>
<h6> </h6>
</div>
<div class="user-info">
<h4>Learn</h4>
<h6> </h6>
</div>
<div class="user-info">
<h4>Contact</h4>
<h6> </h6>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.js"></script>
<script src="js/classie.js"></script>
<script src="js/AnimOnScroll.js"></script>
<script>
new AnimOnScroll( document.getElementById( 'grid' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
} );
</script>
<script>
$('#myCarousel').carousel({
interval: 1800
});
</script>
</body>
</html>
And here is the code in Javascript:
function showDivFour() {
document.getElementById('div4').style.display = "block";
}
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
function showDivOne() {
document.getElementById('div1').style.display = "block";
}
function showDivTwo() {
document.getElementById('div2').style.display = "block";
}
function showDivThree() {
document.getElementById('div3').style.display = "block";
}
// THIS SHOULD BE THE BETTER ONE
var correctFileC = $('#div1image').attr("div_answer");
var correctFileC = $('#div2image').attr("div_answer");
var correctFileC = $('#div3image').attr("div_answer");
var correctFileC = $('#div4image').attr("div_answer");
var correctFile1 = $('#myimage1').attr("div_if");
var correctFile2 = $('#myimage2').attr("div_if");
var correctFile3 = $('#myimage3').attr("div_if");
var correctFile4 = $('#myimage4').attr("div_if");
var audio_1 = ["LowATrebbleCleffPianoVC.mp3","LowETrebbleCleffPianoVC.mp3",
"LowGTrebbleCleffPianoVC.mp3","MidBTrebbleCleffPianoVC.mp3",
"MidCTrebbleCleffPianoVC.mp3","MidDTrebbleCleffPianoVC.mp3"];
var rand_audio_1 =
audio_1[Math.floor(Math.random()*audio_1.length)].getElementByName.
(audioholder.innerHTML(rand_audio_1);
function div_if(){
if(audio_1[0]){
var R1 = ["myimage1","TrebbleCleffLowA.gif"],["myimage2","TrebbleCleffLowA.gif"],["myimage3","TrebbleCleffLowA.gif"],["myimage4","TrebbleCleffLowA.gif"];
if[R1(var i=0; i<R1.length;i++).length=4];
} else if(audio_1[1]){
var R2 = ["myimage1","LowE.gif"],["myimage2","LowE.gif"],["myimage3","LowE.gif"],["myimage4","LowE.gif"];
if[R2(var i=0; i<R2.length;i++).length=4];
do nothing
} else if(audio_1[2]){
var R3 = ["myimage1","LowG.gif"],["myimage2","LowG.gif"],["myimage3","LowG.gif"],["myimage4","LowG.gif"];
if[R3(var i=0; i<R3.length;i++).length=4];
do nothing
} else if(audio_1[3]){
var R4 = ["myimage1","MidB.gif"],["myimage2","MidB.gif"],["myimage3","MidB.gif"],["myimage4","MidB.gif"];
if[R4(var i=0; i<R4.length;i++).length=4];
do nothing
} else if(audio_1[4]){
var R5 = ["myimage1","MidC.gif"],["myimage2","MidC.gif"],["myimage3","MidC.gif"],["myimage4","MidC.gif"];
if[R5(var i=0; i<R5.length;i++).length=4];
do nothing
{ else if(audio_1[5]){
var R6 = ["myimage1","MidD.gif"],["myimage2","MidD.gif"],["myimage3","MidD.gif"],["myimage4","MidD.gif"];
if[R6(var i=0; i<R6.length;i++).length=4];
do nothing
} else if{
L1.Push(R);
} else if{
L1.Push(R1)
} else if{
L1.Push(R2)
} else if{
L1.Push(R3)
} else if{
L1.Push(R4)
}
function div_answer(){
if(R[0]){
document.getElementById(div1).innerHTML(divC);
divC.src='GoodJob.png'{
else if(R[1]){
document.getElementById(div2).innerHTML(divC);
divC.src='GoodJob.png'
}
else if(R[2]){
document.getElementById(div3).innerHTML(divC);
divC.src='GoodJob.png'
}
else {
document.getElementById(div4).innerHTML(divC);
divC.src='GoodJob.png'
}
}
}

I assume every audio fragment will have an image? So with that in mind, you create a random index to select an audio fragment (which you already do). Why don't you store that index in a variable and associate the image fragment with it?
Another option would be to create an object. So you make your array with audiofragments and then you initialize a new JS object, and assign the names of the images to 'properties' with your audiofragment as key. Like this:
var images = {};
images[audioname] = image-name;
***Do this for each audiofragment of course***
That way you can just ask the image from your images-object, using the property audioname.

When the page renders, place some value inside the attributes for the images or div:
<img id=myimage data-audio-file="xyz123.mp3" src="...." />
<div data-audio-file="xyz123.mp3" src="...." >My Content</div>
Read the attribute out when it's time to take some action:
var correctFile = $('#myimage').attr("data-audio-file");

jQuery functions never getting executed on .ready()

I'm a little new to jQuery and I am having some issue wiring up my click events. If I put an alert(''); I can see that menu.js is referenced properly but when I alert from inside the .ready() function the alert is never triggered...
JSFiddle: Click Here
Could someone be kind enough to point out my issue? Thanks!
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Demo</title>
<link href="Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
<link href="Content/MenuDemo.css" rel="stylesheet" />
</head>
<body>
<div class="navbar">
<img id="navbar-logo" src="Content/images/ingr_logo.png" class="ui-button-icon-primary">
<img id="navbar-logo" src="Content/images/smaller.png" class="image-right">
</div>
<div id="menu1" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img id="expand1" src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img id="drag1" src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img id="close1" src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<div id="menu2" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<div id="menu3" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<div id="menu4" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<!-- Scripts-->
<script src="Scripts/libs/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="Scripts/libs/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
<script src="Scripts/site/menu.js" type="text/javascript"></script>
</body>
</html>
menu.js
/// <reference path="../jquery-2.1.1.js" />
/// <reference path="../jquery-ui-1.10.4.js" />
// Make Menus Draggable
function makeMenusDragHandler() {
$('.locked').click(function () {
$('.floating-menu').draggable();
});
}
// Collapse/Expand Height of Navbar
function smallBigNavbarHandler() {
$('.image-right').click(function () {
var navbar = $('.navbar');
navbar.height(navbar.height() === 51 ? 30 : 15);
});
}
$(document).ready(function ($) {
// add handlers
smallBigNavbarHandler();
makeMenusDragHandler();
// setters
});

You have two issues:
You don't have jQuery included
See below
This line:
navbar.height = navbar.height() === 51 ? 30 : 15;
should be:
navbar.height(navbar.height() === 51 ? 30 : 15);
The setter is:
.height(value)
and not
.height = value

Show and hide images with next previous button using Javascript

I have four divs, each div contain images and contents. one next and previous button. at a time only div will show. on click of next the second div have to be shown and first will hide. same upto fourth div. Need to use pure Javascript. No jquery or javascript plugins is allowed.... :(. Can anyone help me to do this?.
Thanks!
My html Code:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="theProduct">
<div id="slides"> <img src="img/prev.jpg" width="29" height="29" alt="Arrow Prev"> <img src="img/next.jpg" width="29" height="29" alt="Arrow Next">
<!-- Show/hide Div strating here -->
<div class="slides_container">
<div class="div1">
<div class="img1">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div2">
<div class="img2">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div3">
<div class="img3">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div4">
<div class="img4">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
</div>
<!-- Show/Hide Div ending here -->
</div>
<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame"> </div>
</div>
</body>
</html>

Practical with this below
<style type="text/css" media="screen">
#container{position:relative;width:120px;height:120px;}
#container div{position:absolute;width:120px;height:120px;}
#box-red{background:red;}
#box-yellow{background:yellow;display:none;}
#box-green{background:green;display:none;}
#box-maroon{background:maroon;display:none;}
</style>
Javascipt
<script type="text/javascript">
var $c =0;
function next(){
var boxes = document.getElementsByClassName("box");
$c +=1;
if($c >= boxes.length) $c = 0;
for (var $i=0;$i<boxes.length;$i++){
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
function prev(){
var boxes = document.getElementsByClassName("box");
$c -=1;
if($c < 0) $c = (boxes.length-1);
for (var $i=0;$i<boxes.length;$i++){
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
</script>
HTML
<div id="container">
<div id="box-red" class="box">DIV1</div>
<div id="box-yellow" class="box">DIV2</div>
<div id="box-green" class="box">DIV3</div>
<div id="box-maroon" class="box">DIV4</div>
</div>
previous next

I think this is what you are loking for:
http://girlswhogeek.com/tutorials/2007/show-and-hide-elements-with-javascript
But you could put that in one function:
<script language="JavaScript">
function ShowHide(divId){
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>

function toggleImage(forwrad){
var imageConainer = document.getElementByID(Your Parent div id);
var images = imageContainer.childNodes;
var showIndex = '';
for(var i=0; i<images.length;i++){
if(images[i].style.display == 'block'){
images[i].style.display == 'none';
if(forwrad){
showIndex = 1+1;
}
else{
showIndex = 1-1;
}
}
}
images[showIndex].style.display = true;
}

technically it's possible with pure CSS as well. with the :target pseudo class. but that would pollute your url with # tags. But you may actually want that.
Also Selectivizr is a good polyfill for old browsers

How do I make a direct call to a Menu item from the content?

I have this code, it works for a rotating menu that is obviously a ul> li> Menu.
What I would like to know is how to trigger (onClick, HRef, etc.) the function for a specific list item such as rot7.
I would like to click a line of text and fire the function, is this possible?
Example "Click here to go there" ,
Kinda like the old days -- {a href="some.html"}Click Here{/a} page loads.
In this case I want the text to open the 7th li> menu item using the form and function of the JQuery script.
There, clear as Mud.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Bridgett's Electrolysis</title>
<!-- Favorite Icon --><link rel="shortcut icon" href="images/beLogoColor3D.png" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
}
#content{
margin:150px auto 10px auto;
}
.reference{
clear:both;
width:800px;
margin:30px auto;
}
.reference p a{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#666;
text-decoration:none;
font-size:10px;
}
.reference p a:hover{
color:#333;
}
</style>
<script type="text/javascript">
// EDITED
$(function () {
$('#link6').click(function () {
$('#rotmenu li:nth-child(6)').click();
});
});
</script>
</head>
<body>
<div class="logoback">
<div id="logo">
<img src="images/beWebLogoColor3D.png" height="250">
</div>
</div>
<div id="content">
<div class="rotator">
<div class="myh">STOP TWEEZING UNWANTED HAIR.....FOREVER!!!</div>
<ul id="rotmenu">
<li>
Home
<div style="display:none;">
<div class="info_image">1.jpg</div>
<div class="info_heading">Relax</div>
<div class="info_description">
<div class="myh1">Eliminate Unwanted Hair</div><br />
<div class="col2"><img src="images/page1_img1.png" alt="" width="90%"></div>
<div class="col2">
<span class="myh2">Safe, Permanent Hair Removal<br />
<br />
Electrolysis is:</span><br />
<span class="myh3home">• Still the only true permanent hair removal method and the only
permanent treatment recognized by the FDA<br />
• An excellent solution for those discouraged by the unsuccessful results of temporary
hair removal methods<br />
• For everyone<br />
• The preferred treatment for combating folliculitis<br />
<br />
</span>
</div>
<div id="mycenter" class="myh2"><a id="link6" href="javascript:;">Book now to schedule your Complimentary Consultation</a>
</div>
</div>
</div>
</li>
<li>
News
<div style="display: none;">
<div class="info_image">2.jpg</div>
<div class="info_heading">The Scoop</div>
<div class="info_description">
<div class="col1">
<img src="images/page2_img1.jpg" alt="" />
<img src="images/appointment-request1.png" width="60%" alt="" />
<img src="images/page2_img3.jpg" alt="" />
</div>
<div class="col3">
<div class="mytabs">Open at our new Location!</div>
<span class="myh3">See our Location Section for a Map or Directions.</span><br /><br /><br /><br />
<div class="mytabs">Online Appointment Booking is Now Available!</div>
<span class="myh3">Go to our Appointments Section and schedule your appointment today.</span><br /><br /><br /><br />
<div class="mytabs">All New Equipment!</div>
<span class="myh3">The latest and greatest equipment has been installed to offer you the most comfortable Electrolysis experience.</span>
</div>
</div>
</div>
</li>
<li>
Services
<div style="display:none;">
<div class="info_image">3.jpg</div>
<div class="info_heading">Here to Serve You</div>
<div class="info_description">
<span class="mytabs">Electrolysis</span><br />
<span class="myh3">These are the areas that Electrolysis can be performed on.</span><br />
<img src="images/areas.png" / width="100%" height="350">
</div>
</div>
</li>
<li>
Location
<div style="display:none;">
<div class="info_image">4.jpg</div>
<div class="info_heading">Come and Visit</div>
<div class="info_description">
<span class="mytabs">1003 E. Broad St. Mansfield TX 76063</span>
<iframe width="100%" height="355px" seamless="seamless" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1003+E+Broad+St,+Mansfield,+TX&aq=2&oq=1003+E+Broad&sll=32.800447,-97.289319&sspn=0.966172,1.783905&t=m&ie=UTF8&hq=&hnear=1003+E+Broad+St,+Mansfield,+Texas+76063&ll=32.565228,-97.130527&spn=0.007568,0.013937&z=14&output=embed">
</iframe>
<br />
</div>
</div>
</li>
<li>
Contact Us
<div style="display:none;">
<div class="info_image">5.png</div>
<div class="info_heading">Get in Touch</div>
<div class="info_description">
<div class="col1">
<span class="mytabs">Contact Info:</span><br />
<span class="myh3">Bridgett's Electrolysis<br />
1003 E. Broad St<br />
Mansfield, TX. 76063<br />
Phone:(817)879-7817<br />
email: <a href="mailto:bridgettselectro#gmail.com?subject=Info Request from your site">
bridgettselectro#gmail.com</a><br />
</span>
</div>
<div class="col3">
</div>
</div>
</div>
</li>
<li>
FAQ
<div style="display:none;">
<div class="info_image">6.png</div>
<div class="info_heading">Electrolysis Questions?</div>
<div class="info_description">
<Iframe src="faq/faq.htm" width="100%" height="400" frameborder="0" marginheight="0"></Iframe>
</div>
</div>
</li>
<li>
Appointment
<div style="display:none;">
<div class="info_image">book.jpg</div>
<div class="info_heading">Book It</div>
<div class="info_description">
<Iframe src="webappt/index.php" width="100%" height="405" frameborder="0" marginheight="0"></Iframe>
</div>
</div>
</li>
<li>
FaceBook
<div style="display:none;">
<div class="info_image">like.png</div>
<div class="info_heading">Coment or Like Us</div>
<div class="info_description">
<div class="mycenter"><span class="myh2">Be Sure to Visit our FaceBook FanPage for deals and coupons!</span></div>
<div class="col2">
<div class="fb-like", data-href="http://www.bridgettselectro.com" data-send="false" data-width="450" data-show-faces="true" data-colorscheme="dark" data-font="arial"></div>
</div>
<div class="col2">
<div class="fb-comments" data-href="https://www.facebook.com/BridgettsElectrolysis?fref=ts" data-num-posts="10" data-width="350" data-colorscheme="dark"></div>
</div>
</div>
</div>
</li>
</ul>
<div id="rot1">
<img src="" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script src="js/atooltip.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var current = 1;
var iterate = function () {
var i = parseInt(current + 1);
var lis = $('#rotmenu').children('li').size();
if (i > lis) i = 1;
display($('#rotmenu li:nth-child(' + i + ')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate, 3000000);
$('#rotmenu li').bind('click', function (e) {
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});
function display(elem) {
var $this = elem;
var repeat = false;
if (current == parseInt($this.index() + 1))
repeat = true;
if (!repeat)
$this.parent().find('li:nth-child(' + current + ') a').stop(true, true).animate({ 'marginRight': '-20px' }, 300, function () {
$(this).animate({ 'opacity': '0.7' }, 700);
});
current = parseInt($this.index() + 1);
var elem = $('a', $this);
elem.stop(true, true).animate({ 'marginRight': '0px', 'opacity': '1.0' }, 300);
var info_elem = elem.next();
$('#rot1 .heading').animate({ 'left': '-420px' }, 500, 'easeOutCirc', function () {
$('h1', $(this)).html(info_elem.find('.info_heading').html());
$(this).animate({ 'left': '0px' }, 400, 'easeInOutQuad');
});
$('#rot1 .description').animate({ 'bottom': '-425px' }, 500, 'easeOutCirc', function () {
$('p', $(this)).html(info_elem.find('.info_description').html());
$(this).animate({ 'bottom': '0px' }, 400, 'easeInOutQuad');
})
$('#rot1').prepend(
$('<img/>', {
style: 'opacity:0',
className: 'bg'
}).load(
function () {
$(this).animate({ 'opacity': '1' }, 600);
$('#rot1 img:first').next().animate({ 'opacity': '0' }, 700, function () {
$(this).remove();
});
}
).attr('src', 'images/' + info_elem.find('.info_image').html()).attr('width', '1200').attr('height', '500')
);
}
});
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>

<a id="link6" href="javascript:;">click to open menu 6</a>
<script>
// EDITED
$(function() {
$('#link6').click(function(){
$('#rotmenu li:nth-child(6)').click();
});
});
</script>
EDIT:
The code above will not work because each time the menu is changing pages sets the container (.description) content with the original tags get upon initialization, so the page content including our a tag is overriden by a the original content which is same as previous one, but overrides the old one and that's why the click handler doesn't work - because it was set on an item which is overriden.
To not set the click handler each time when the menu changes the pages it should be bind into the link as simple as taht: <a onclick="$('#rotmenu li:nth-child(6)').click();" href="javascript:;">Book now to schedule your Complimentary Consultation</a>.
That's it - works fine.

We Keep Coding

JavaScript is the programming language of the Web.

Uikit 3 Load more jQuery - javascript

Related

jQuery caoursel slider not updating width on window resize

How do I randomize images and audio while making sure to keep divs attatched in Javascript?

jQuery functions never getting executed on .ready()

Show and hide images with next previous button using Javascript

How do I make a direct call to a Menu item from the content?

Categories

Resources