With the code below, why does $("#sidenav-overlay").trigger("click") work while this.$sideNavOverlay.trigger("click") doesn't work?
(function($) {
$(function() {
var app = {
init: function() {
this.cacheDom();
this.bindEvents();
},
cacheDom: function() {
this.$buttonCollapse = $('.button-collapse');
this.$sideNavClear = $("#side-nav-clear");
this.$sideNavOverlay = $("#sidenav-overlay");
},
bindEvents: function() {
this.$buttonCollapse.sideNav();
this.$sideNavClear.on('click', this.closeSideNavigation.bind(this));
},
closeSideNavigation: function() {
console.log('closesideNavigation');
console.log(this);
console.log(this.$sideNavOverlay);
console.log($("#sidenav-overlay"));
//$("#sidenav-overlay").trigger("click");
this.$sideNavOverlay.trigger("click");
}
};
app.init();
}); // end of document ready
})(jQuery); // end of jQuery name space
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="http://materializecss.com/css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li>Navbar Link
</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Navbar Link <a class="right" id="side-nav-clear" style="margin-top: 22px;"><i class="material-icons small icon-demo">clear</i></a>
</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<h1 class="header center orange-text">Starter Template</h1>
</div>
</div>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://materializecss.com/bin/materialize.js"></script>
The only thing I can think of that would account for the reported symptom is that something in code you haven't shown is removing the old #sidenav-overlay (the one you cached in your property) and then appending a new #sidenav-overlay instead. So you're triggering the event on the old, no-longer-in-the-page element instead of the new one.
And in fact, that's what's happening, and we can see by checking to see if the #sidenav-overlay you've saved is the same element that's in the DOM later when clicked (it isn't):
(function($) {
$(function() {
var app = {
init: function() {
this.cacheDom();
this.bindEvents();
},
cacheDom: function() {
this.$buttonCollapse = $('.button-collapse');
this.$sideNavClear = $("#side-nav-clear");
this.$sideNavOverlay = $("#sidenav-overlay");
},
bindEvents: function() {
this.$buttonCollapse.sideNav();
this.$sideNavClear.on('click', this.closeSideNavigation.bind(this));
},
closeSideNavigation: function() {
console.log(
"Same element? " +
($("#sidenav-overlay")[0] === this.$sideNavOverlay[0])
);
$("#sidenav-overlay").trigger("click");
}
};
app.init();
}); // end of document ready
})(jQuery); // end of jQuery name space
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="http://materializecss.com/css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li>Navbar Link
</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Navbar Link <a class="right" id="side-nav-clear" style="margin-top: 22px;"><i class="material-icons small icon-demo">clear</i></a>
</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<h1 class="header center orange-text">Starter Template</h1>
</div>
</div>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://materializecss.com/bin/materialize.js"></script>
So unless you can prevent whatever's removing and replacing the element from doing so, just look it up when you need it. (In general, unless you have a good reason for doing something else, looking up elements when you need them is preferable to keeping them in properties or variables.)
Related
I am trying to learn about javascript so this might be quite a noob question. I would appreciate if someone with more experience could see what I am attempting and correct any problems I have with the approach, so if this looks weird please let me know!
I have a side navigation bar that divides into different groups. Within each group there is an ul that contains some li, which themselves contain an a with two p tags nested. The reason for this nesting is that I want to have each side nav "button" look like it has a label (the first p) on the left and a number (the second p) on the right (like a number of notifications or something).
I want to add an event listener to each li.nav-task-list so that if that li or any of its descendants is clicked then it selects that li and gives access to the "group" that it belongs to (defined by the id in the div that is the grandparent to the selected li). I had problems with this because the e.target in the click event would return any of the li, a, or p elements.
I have pasted my solution and it seems to do what I want. But the problem is that this took a lot of effort and testing compared to the examples of event listeners that I was reading from, and this makes me think I have either misunderstood something or overcomplicated it somehow. This also seems like such a common thing to do, so I want to know if I have overlooked something.
Here is my code:
const sideBar = document.getElementById('sidebar');
const navTaskLists = document.getElementsByClassName('nav-task-list');
Array.from(navTaskLists).forEach(function(e) {
e.addEventListener('click', function() {
console.log(e.querySelector('p.label').innerText);
if (e.classList.contains('active')) {
return;
}
removeAllActive(navTaskLists);
let parentLi = e.closest('li.nav-task-list')
parentLi.classList.toggle('active');
let parentGroup = e.closest('div.nav-task-list-group')
if (parentGroup.id != '') {
console.log(`clicked in the ${parentGroup.id} group.`)
}
});
})
function removeAllActive(elements) {
// Loops over all elements and removes active class
Array.from(elements).forEach(function(e) {
e.classList.remove('active');
})
}
#sidebar {
min-width: 300px;
max-width: 300px;
}
.nav-group-header {
cursor: pointer;
}
.nav-task-list:hover {
background-color: #eee;
}
.nav-task-list.active {
background-color: #bed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col border" id="sidebar">
<div class="nav-task-list-group" id="group-one">
<ul class="nav flex-column">
<li class="nav-item nav-task-list">
<a class="nav-link flex-grow-1 d-flex" href="#" id="today-task-list">
<p class="flex-grow-1 mb-0 label">G1 Item 1</p>
<p class="num-tasks mb-0 fs-6">3</p>
</a>
</li>
<li class="nav-item nav-task-list">
<a class="nav-link flex-grow-1 d-flex" href="#" id="upcoming-task-list">
<p class="flex-grow-1 mb-0 label">G1 Item 2</p>
<p class="num-tasks mb-0 fs-6">21</p>
</a>
</li>
</ul>
</div>
<hr>
<div class="nav-task-list-group" id="group-two">
<ul class="nav flex-column">
<li class="nav-item nav-task-list">
<a class="nav-link flex-grow-1 d-flex" href="#" id="today-task-list">
<p class="flex-grow-1 mb-0 label">G2 Item 1</p>
<p class="num-tasks mb-0 fs-6">3</p>
</a>
</li>
<li class="nav-item nav-task-list">
<a class="nav-link flex-grow-1 d-flex" href="#" id="upcoming-task-list">
<p class="flex-grow-1 mb-0 label">G2 Item 2</p>
<p class="num-tasks mb-0 fs-6">21</p>
</a>
</li>
</ul>
</div>
</div>
<div class="col border">
Stuff
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
When I clicked Ön Izleme (Span/Button) , i come the back i cant use my JavaScript Function Like Draggable Resize method on my divs. Do anyone can help me ? Önizleme Button job is print
When i back to from print screen i cant use my JavaScript function Like Draggable and resize. What is the my fault do anyone can help me?
<!DOCTYPE html>
<html>
<head>
<style>
.divKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; background-color: #E98A7E;float:left;}
.divKolon-resizable-e{
height: 50px !important;
}
.divUstKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; text-align:center;float:left;margin-right:20px;}
.shadow(#shadow){
-webkit-box-shadow:#shadow;
-mox-box-shadow:#shadow;
box-shadow:#shadow;
}
.label-danger{
margin-left:10px;
margin-top:10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
var Bosluk=0;
var SecilenItem;
var VTBilgileri=[];
var YaziFont;
var YaziBoyutu;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
//console.log(ev.target);
}
function drop(ev) {
ev.stopPropagation()
var EklenecekDiv=ev.target;
var data = ev.dataTransfer.getData("text");
//console.log(ev.target);
console.log($(ev.target).parent());
var divim=ev.target;
var c = divim.children;
console.log(c.lenght);
/*if(c[2]==null)
{
EklenecekDiv=$($(ev.target).parent());
EklenecekDiv.append()
var label1=document.getElementById(data);
var MyLabelAdd1=document.createElement("div");
MyLabelAdd1.appendChild(document.createTextNode($(label1).html()));
$(MyLabelAdd1).attr("name","KolonAdi");
EklenecekDiv.append(MyLabelAdd1);
divim.remove();
label1.remove();
return;
console.log(EklenecekDiv);
}
if(c[3]!=null)
{
c[3].remove();
}*/
var label=document.getElementById(data);
var MyLabelAdd=document.createElement("div");
MyLabelAdd.appendChild(document.createTextNode($(label).html()));
$(MyLabelAdd).attr("name","KolonAdi");
if(YaziFont!=null&&YaziBoyutu!=null){MyLabelAdd.style.fontFamily=YaziFont; }
if(YaziBoyutu!=null){alert(YaziBoyutu); MyLabelAdd.style.fontSize =YaziBoyutu+"px"; }
EklenecekDiv.appendChild(MyLabelAdd);
label.remove();
}
function tiklandi()
{
alert("Okey");
}
function Click(e){
if(SecilenItem==null)
{
alert("Lütfen Alan Seçiniz");
return;
}
var item=SecilenItem;
var div=document.getElementById("Itemler");
var label=document.createElement("span");
$(label).addClass("label label-danger col-xs-1");
$(label).attr("id","drag");
$(label).attr("draggable","true");
$(label).attr("ondragstart","drag(event)");
$(label).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
label.appendChild(document.createTextNode(item));
div.appendChild(label);
//console.log($(label).html());
var KolonDiv=document.createElement("div");
$(KolonDiv).attr("ondrop","drop(event)")
$(KolonDiv).attr("ondragover","allowDrop(event)");
$(KolonDiv).addClass("divKolon");
KolonDiv.style.marginLeft=Bosluk+"px";
$(KolonDiv).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
$(KolonDiv).resizable();
$(KolonDiv).draggable();
var Kolonlar=document.getElementById("Kolonlar");
Kolonlar.appendChild(KolonDiv);
};
function CiktiGetir(e){
var KolonlarinChildren=document.getElementsByClassName("divKolon");
var printContents = document.getElementById("Kolonlar");
var originalContents = document.body.innerHTML;
printContents=printContents.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
function TabloAlanTiklandi (e){
SecilenItem=$(e).text();
$(e).parents(".dropdown").find('.btn').html( $(e).text() );
//e.remove();
}
function FontLi(e)
{
YaziFont=$(e).text();
$(e).parents(".dropdown").find('.btn').html( $(e).text() );
}
function StilDegistir(e)
{
}
function EkAlanClick(e){
if($("#EkAlan").val()==null)
{
alert("Lütfen Alan Giriniz");
return;
}
var h1=document.createElement("h1");
var item=$("#EkAlan").val();
var div=document.getElementById("Itemler");
var label=document.createElement("span");
$(label).addClass("label label-danger col-xs-1");
$(label).attr("id","drag");
$(label).attr("draggable","true");
$(label).attr("ondragstart","drag(event)");
$(label).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
label.appendChild(document.createTextNode(item));
div.appendChild(label);
//console.log($(label).html());
var KolonDiv=document.createElement("div");
$(KolonDiv).attr("ondrop","drop(event)")
$(KolonDiv).attr("ondragover","allowDrop(event)");
$(KolonDiv).addClass("divKolon");
$(KolonDiv).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
$(KolonDiv).resizable();
$(KolonDiv).draggable();
var Kolonlar=document.getElementById("Kolonlar");
Kolonlar.appendChild(KolonDiv);
$("#EkAlan").val("");
}
function BoslukEkle(e)
{
if($("#Aralik").val().lenght==0)
{
alert("Aralik Degeri Giriniz");
return;
}
Bosluk=$("#Aralik").val();
alert(Bosluk);
$("#Aralik").val("");
}
function BoyutEkle(e)
{
if($("#YaziBoyutu").val().lenght==0)
{
alert("Boyut Degeri Giriniz");
return;
}
YaziBoyutu=$("#YaziBoyutu").val();
$("#YaziBoyutu").val("");
}
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Calendar</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Left side column. contains the logo and sidebar -->
<!-- Content Wrapper. Contains page content -->
<!-- Content Header (Page header) -->
<!-- Main content -->
<div class="divUstKolon col-xs-12" id="Itemler" style="height:50px"></div>
<div class=" col-xs-12" style="margin-top:20px" >
<div class="dropdown col-xs-1" style="height:32px " >
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Alan Ekle
<span class="caret"></span></button>
<ul id="Secenekler" class="dropdown-menu">
<li><a onClick="TabloAlanTiklandi(this)" href="#">Isim</a></li>
<li><a onClick="TabloAlanTiklandi(this)"href="#">SoyIsim</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Adress</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Numara</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Yaş</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Tanıdık 1</a></li>
</ul>
</div>
<label class="btn btn-default col-xs-1" style="margin-left :10px ; height:32px " id="Ekle" onClick="Click(this)"> Ekle </label>
<div class="col-xs-1"></div>
<input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="EkAlan">
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="EkAlanClick(this)"> Ek Alan Ekle </label>
<div class="col-xs-4" ></div>
<label class="btn btn-danger col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ön İzleme</label>
<label class="btn btn-primary col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ana Sayfa</label>
</div>
<div class="col-xs-12" style="margin-top:10px">
<input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="YaziBoyutu" placeholder="Yazı Boyutu">
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" onClick="BoyutEkle(this)"> Değiştir</label>
<div class="col-xs-1" ></div>
<div class="dropdown col-xs-2" style="height:32px " >
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Yazı Font
<span class="caret"></span></button>
<ul id="Fontlar" class="dropdown-menu">
<li><a onClick="FontLi(this)" href="#">Georgia</a></li>
<li><a onClick="FontLi(this)"href="#">Palatino Linotype</a></li>
<li><a onClick="FontLi(this)" href="#">Book Antiqua</a></li>
<li><a onClick="FontLi(this)" href="#">Times New Roman</a></li>
<li><a onClick="FontLi(this)" href="#">Arial</a></li>
<li><a onClick="FontLi(this)" href="#">Helvetica</a></li>
<li><a onClick="FontLi(this)" href="#">Arial Black</a></li>
<li><a onClick="FontLi(this)" href="#">Impact</a></li>
<li><a onClick="FontLi(this)" href="#">Lucida Sans Unicode</a></li>
<li><a onClick="FontLi(this)" href="#">Tahoma</a></li>
<li><a onClick="FontLi(this)" href="#">Verdana</a></li>
<li><a onClick="FontLi(this)" href="#">Courier New</a></li>
<li><a onClick="FontLi(this)" href="#">Lucida Console</a></li>
</ul>
</div>
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="StilDegistir(this)"> Yazi Stil Değiştir</label>
<div class="col-xs-1" ></div>
</div>
<div class="col-xs-12" id="Kolonlar" style="margin-top :10px"> </div>
<!-- /.content -->
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
<!-- ./wrapper -->
<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="plugins/fullcalendar/fullcalendar.min.js"></script>
<!-- Page specific script -->
</body>
</html>
It's not an optimal solution but can you try replacing CiktiGetir function with this:
function CiktiGetir(e){
var htmlElement = document.querySelector("html");
var printContents = document.getElementById("Kolonlar");
// Make body invisible, append new element to HTML
document.body.style.display = "none";
htmlElement.appendChild(printContents);
window.print();
// Make body visible again, remove the added element
document.body.style.display = "initial";
htmlElement.removeChild(printContents);
}
Replacing HTML content breaks the JS events and dynamic contents.
You are replacing the body HTML
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
So you will need to reatach the events.
Try the "on" jquery method. Something like
$(document).on('click', '#CiktiGetir', function() { CiktiGetir(); });
My code was just an example. You will have to adapt it to your code.
You need to reatach the events after replace body content.
If, you dont want to to this, you can refresh the entire page.
function CiktiGetir(e){
var KolonlarinChildren=document.getElementsByClassName("divKolon");
var printContents = document.getElementById("Kolonlar");
printContents=printContents.innerHTML;
document.body.innerHTML = printContents;
window.print();
location.reload();
}
In the code below, index.html page is not getting styled in the browser as per the css and js it links to in the head of index.html. There is also a script tag before the closing body tag. I tried removing the ".." and playing around with the path for no avail.
index.html siblings are folders:
css, js and jquery.mobile-1.4.5
Contents of css folder:
index.css
Content of js folder:
index.js
jquery-1.11.3
Contents of jquery.mobile-1.4.5 folder:
Will the links in the head tag resolve correctly? if not, please suggest. Thanks
$("header .ui-btn-left").on("tap", drawerToggle);
$(".contentDiv nav").on("swipeleft", drawerClose);
$("ul").children("li").on("tap", navItemHandler);
$(document).on("pagebeforeshow", middleButtonGone);
function drawerToggle() {
var left = $("nav").offset().left;
var width = $("nav").width();
if (left == 0) {
$("nav").css({
"left" : -width
});
} else {
$("nav").css({
"left" : 0
});
}
}
function drawerClose() {
var left = $("nav").offset().left;
var width = $("nav").width();
if (left == 0) {
$("nav").css({
"left" : -width
});
}
}
function drawerOpen() {
var left = $("nav").offset().left;
var width = $("nav").width();
if (left != 0) {
$("nav").css({
"left" : 0
});
}
}
function middleButtonToggle() {
if ($("footer ul").hasClass('ui-grid-b')) {
$("#extra").hide();
$("footer ul").removeClass('ui-grid-b').addClass('ui-grid-a').find("li").last().removeClass('ui-block-c').addClass("ui-block-b");
} else {
$("#extra").show();
$("footer ul").removeClass('ui-grid-a').addClass('ui-grid-b').find("li").last().removeClass('ui-block-b').addClass("ui-block-c");
}
}
function middleButtonGone() {
if ($("footer ul").hasClass('ui-grid-b')) {
$("#extra").hide();
$("footer ul").removeClass('ui-grid-b').addClass('ui-grid-a').find("li").last().removeClass('ui-block-c').addClass("ui-block-b");
}
}
function navItemHandler() {
var selected_index = $(this).index();
drawerClose();
}
nav {
width: 80%;
position: fixed;
background-color: white;
left: 0;
top: 2em;
transition:left 0.3s ease;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RRR</title>
<link rel="stylesheet" href="../jquery.mobile-1.4.5/jquery.mobile-1.4.5.css"/>
<script src="../js/jquery-1.11.3.js"></script>
<script src="../jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="../css/index.css" />
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<header data-role="header" data-position="fixed">
<a class="ui-btn-left ui-btn ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-bars">Menu</a>
<h1>Activity label</h1>
<a class="ui-btn-right ui-btn ui-btn-inline ui-corner-all ui-btn-icon-right ui-icon-gear">Info</a>
</header>
<div data-role="content" class="contentDiv">
<form method="post" action="demoform.asp">
<input type="text" name="fname" id="fname">
</form>
<nav>
<ul data-role="listview" data-inset="true">
<li>
<img src="css/images/image.png" alt="France" class="ui-li-icon ui-corner-none">France
</li>
<li>
<img src="css/images/image.png" alt="Germany" class="ui-li-icon">Germany
</li>
<li>
<img src="css/images/image.png" alt="Great Britain" class="ui-li-icon">Great Britain
</li>
<li>
<img src="css/images/image.png" alt="Finland" class="ui-li-icon">Finland
</li>
<li>
<img src="css/images/image.png" alt="United States" class="ui-li-icon ui-corner-none">United States
</li>
</ul>
</nav><!-- /side navigation -->
</div><!-- /content -->
<footer data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>
<button type="submit" data-theme="c">
NO
</button>
</li>
<li id="extra">
<button type="submit" data-theme="c">
EXTRA
</button>
</li>
<li>
<button type="submit" data-theme="c">
YES
</button>
</li>
</ul>
</div>
</footer><!-- footer -->
<script src="../js/index.js"></script>
</body>
</html>
index.css
Your paths are wrong
If index.html is a sibling to the resource folders, then the paths to the folders should not be "../some path", it should be "some path".
Change to the following in head:
<link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.css"/>
<script src="js/jquery-1.11.3.js"></script>
<script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="css/index.css" />
Change to the following at the end of the body:
<script src="js/index.js"></script>
It might be good to understand relative path's, specifically in regards to a parent directory.
When I click on "Tools" tab, nothing happens: tabs don't switches, not toggles.
$('[data-toggle="tab"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href');
$.get(loadurl, function(data) {
$('#content').html(data);
});
$this.tab('show');
return false;
});
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="navigation" class="active">My links</li>
<li role="navigation">Statistics</li>
<li role="navigation">Tools</li>
<li role="navigation">Payments</li>
</ul>
</div>
<div id="content" class="container">
</div>
Where I am wrong?
Put
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
before
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
like this:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
bootstrap.min.js requires jquery.min.js to run first before it.
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.