I've got a menu as listview in JQM. On every page it hould be normal, only on one of the it gets extended by 2 items. Now, I've been searching through Internet and nothing works. Things I've tried:
-location.reload()
-trigger('create')
-$("#menuList").listview().listview('refresh');
-$("#menuList").create;
-child.create
and maybe some more. Here's the code:
DOM
<div id="menu" data-role="panel" data-display="push">
<center>
<br />
<ul id="menuList" data-role="listview">
<li><a data-rel="close" href="index" class="ui-btn">Home</a></li>
<li><a data-rel="close" href="providers" class="ui-btn">providers</a></li>
<li><a data-rel="close" href="seekers" class="ui-btn">seekers</a></li>
<li><a data-rel="close" href="add" class="ui-btn">add</a></li>
<li><a data-rel="close" href="logout" class="ui-btn">logout</a></li>
</ul>
</center>
JS:
$( document ).delegate("#providers", "pagebeforeshow", function() {
function addMenuButtons()
{
var ul = $("#menuList");
//var hr = document.createElement("hr");
//ul.append(hr);
for( var i in buttons )
{
var name = buttons[i].split(',');
/*var a = document.createElement("a");
a.setAttribute("data-rel","popup");
a.className = "ui-btn ui-corner-all ui-shadow" ;
a.id = name[1]+"Button";
a.href = "#"+name[1];
a.innerHTML = name[0] ;
var li = document.createElement("li");
li.appendChild(a);
ul.append(li);*/
//a.create;
$("#menuList").html( $("#menuList").html()+"<li><a data-rel='popup' class='ui-btn ui-corner-all ui-shadow' id='"+name[1]+"+Button' href='#"+ name[1] +"'>"+ name[0] +"</a></li>" );
}
//$("#menuList").trigger('create');
$("#menuList").listview();//.listview('refresh',true);
}
addMenuButtons();
});
buttons- object I made, doesn't matter here. Any ideas on this?? I keep failing trying fix this. When I F5 the page, the menu updates correctly...
Use .enhanceWithin() on the parent of the changed widget.
$('.parent').enhanceWithin();
Ref:
.enhanceWithin()
Related
I've a list of links and I've created a function that does a link disabling. I've tried 'return false' and preventDefault() but it is preventing this from running Flask operations in the back end as well so I did replaceChild(). Can someone help me modify this function in a way that whenever anyone is clicked, the full menu is disabled?
<body>
<ul id="list">
<li><image src="{{url_for('static',filename = 'logo.png')}}"; width="96px"; height="96px"></li>
<li>View Pages</li>
<li>View Images</li>
<li>View Lists</li>
<li>View Maps</li>
<li><a id="r1" href="/reload" onclick="switcherR()">Reload</a></li>
<li><a id="r2" style="display: none;">Reload</a></li>
</ul>
</body>
and the function switcherR is this:
<script>
function switcherR(){
var re1 = document.getElementById("r1");
var re2 = document.getElementById("r2");
var lis = document.getElementById("list");
r2.style.background = "#b3b3b3";
r2.style.display = "block";
r1.style.display = "none";
lis.replaceChild(re2, re1);
}
</script>
One of the way is to create CSS rule such as this:
.disabled {
pointer-events: none;
cursor: default;
}
Then add to <li> tags a class (for example menuItem). And then in .js code use addEventListener() on your list where you will add a class 'disabled' to menuItem such as
document.getElementById("list").addEventListener("click", (evt) => {
evt.target.menuItem.add(`disabled`);
});
I have a div that contains a menu, that menu slide from left to rigth when the user click on a button, everything is ok until here, but i can't replied the same effect when I tried to show the next target.
The skeleton of the menu is below:
<button id="icons-header" class="hamburguer">
Push me!
</button>
<div id="sideBar" class="container-fluid sidebar visible">
<div class="row">
<div class="menu-left">
<ul id="mm-1" class="mm-list visible"> /This is the principal menu
<li><a class="mm-next" href="#" data-target="#women">Women</a></li>
<li><a class="mm-next" href="#" data-target="#men">Men</a></li>
<li><a class="mm-next" href="#" data-target="#kids">Kids</a></li>
</ul>
<!-- from here to the final are the sub elements -->
<ul id="men" class="mm-list">
<li><a class="mm-next icon" href="#" data-target="#mm-1">
<i class="glyphicon glyphicon-triangle-left"></i> Home</a></li>
<li class="menu-title"><span> Men</span></li>
<li><a class="mm-next" href="#" data-target="#men-clothing">clothes</a></li>
<li><a class="mm-next" href="#" data-target="#mm-bags">stuff</a></li>
</ul>
<ul id="men-clothing" class="mm-list">
<li><a class="men-bags" href="#" data-target="#men">
<i class="glyphicon glyphicon-triangle-left"></i> Men</a></li>
<li class="menu-title"><span> clothes</span></li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
<li>element</li>
</ul>
The first effect to show the menu is this:
var hidden = $('#sideBar');
var element = $('#mm-1');
if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow").addClass('visible');
}
That code I replied to show the new segment but not works, my complete code is jsfiddle
#victor, In this case you can do something like this(I just made changes in JS). Please take a look at once.
<script>
$(function(){
$(".hamburguer").click(function(){
var button = $(this).attr('class');
console.log(typeof button);
if(button == "hamburguer")
{
$(this).removeClass('hamburguer');
$(this).addClass('blueCross');
$('#mm-1').show();
/*$('#sideBar').show(300);*/
}else
{
$(this).removeClass('blueCross');
$(this).addClass('hamburguer');
$(".mm-list").hide();
}
var hidden = $('#sideBar');
var element = $('#mm-1');
if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow").addClass('visible');
$('#mm-1').show();
}
});
$(document).on('click', '.mm-next', function (e) {
e.preventDefault();
var hidden = $('#sideBar');
var target = $(this).data("target");
var others = $("div.menu-left").find(".mm-list").not(target);
others.hide();
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
hidden.animate({"left":"0px"}, "slow").removeClass('visible');
$(target).show();
return false;
});
});
</script>
Let me know if it helped.
There is error in your code, You class name is different in you javascript. I have made some changes in your javascript please take a look into it and let me know if it doesn't work
$(function(){
$(".hamburguer").click(function(){
var button = $(this).attr('class');
console.log(typeof button);
if(button == "hamburguer")
{
$(this).removeClass('hamburguer');
$(this).addClass('blueCross');
$('#mm-1').show();
/*$('#sideBar').show(300);*/
}else
{
$(this).removeClass('blueCross');
$(this).addClass('hamburguer');
$(".mm-list").hide();
}
var hidden = $('#sideBar');
var element = $('#mm-1');
if ((hidden.hasClass('visible')) && (element.hasClass('visible'))){
hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow").addClass('visible');
}
});
$(document).on('click', '.mm-next', function (e) {
e.preventDefault();
var target = $(this).data("target");
var others = $("div.menu-left").find(".mm-list").not(target);
others.hide();
$(target).show();
return false;
});
});
Class name 'hamburguer' create issue as they seems non-identical in supplied javascript. Please check it once. Let me know if it helped.
I have one list item which have a class name in html5
<li class="navi"> HOME </li>
that list item I want to insert a anchor tag via class name in javascript. anchor is here:
HTML
how can i do this to be:
**<li class="navi"><a href="#HOME" >HOM E</a> </li>**
pure vanilla javascript:
function makelink() {
var li = document.getElementsByClassName('navi')[0];
li.innerHTML = 'HTML';
}
<ul>
<li class="navi"> HOME </li>
</ul>
<button onclick="makelink()">click here to make HOME link</button>
Try this
$(document).ready(function(){
$("ul").append("<li class='navi'><a href='#HOME' >HOM E</a></li>")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<ul>
<li class="navi"> HOME </li>
</ul>
If you're using jQuery, you can do this:
$li = $('li.navi');
$li.html("<a href='#"+ $li.text() +"'>"+ $li.text() +"</a>");
Without complete code example showing what you are attempting, we are guessing. But you could try:
$('.navi').append('HOME');
Document.createElement and Node.appendChild
var listItem = document.querySelector('navi');
var name = listItem.innerText;
var anchor = document.createElement('a');
var anchor.href = "#"+name;
var anchor.innerText = name;
listItem.appendChild(newNode);
I don't know if i described the title correctly ...
Basically i have a jquery script that loads content when link is clicked.
I would like to know to say lets say i loaded /contents/about.php via jquery into the div i specified.
<li class="nav__item ">
<a class="header__link subdued" href="#home" data-target="contents/home">
<span class="complimentary push--left">Home</span>
</a>
</li>
<li class="nav__item ">
<a class="header__link subdued" href="#news" data-target="panel/admin/news/news">
<span class="complimentary push--left">News</span>
</a>
</li>
<li class="nav__item ">
<a class="header__link subdued" href="#/contents/about" data-target="contents/about">
<span class="complimentary push--left">About Us</span>
</a>
</li>
Is it possible for me to enter http://localhost/#/contents/about or even http://localhost/contents/about and it would as the same function as the jquery click load script.
Alternatively is there a simple way to have a back/forward setup in jquery content load?
script:
<script>
$(document).ready(function(){
var trigger = $('#nav ul li a'),
container = $('#wrapper');
trigger.on('click', function(){
var $this = $(this),
target = $this.data('target');
container.load(target + '.php');
return false;
});
});
</script>
Hope it makes sense.
jQuery:
$(document).ready(function(){
var cur = window.location.href;
var a = cur.split("/");
var pos = a.indexOf("#");
if(pos != -1){
var trigger = $('#nav ul li a');
var container = $('#wrapper');
target = a[pos+1]+""+a[pos+2];
container.load("http://localhost/"+ target + ".php");
return false;
}
});
Try this, if not useful then i will remove this, cause i don't understand what you want.
I want my JQuery to select one of the navigation links—based on the page that I'm on—and then I want it to move it to the top of the list.
This is the HTML of my navigation bar:
<nav>
<ul id=nav>
<li>Home</li>
<li>Skillsets</li>
<li><icon>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
This is the JQuery I'm using to try and reorder the list:
var page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function(){
var ul = $('nav').children('ul'),
li = ul.children('li'),
href = $('a[href*='+page+']');
//move element to top
ul.prepend(href.parent());
});
It isn't working and I would assume that it's because the href variable isn't being set correctly. alert(href); and alert(href.parent()); output nothing.
Any ideas? Thanks!
As #user3064914 said, you missed '#', but you missed quotes either:
<ul id = "nav">
var href = $('a[href*="'+page+'"]');
EDIT
Also, you can write a bit shorter with child selectors:
var ul = $('nav > ul'),
href = ul.find('> li a[href*="' + page + '"]');
ul.prepend(href.parent());
Try this, it will work.
<script>
var page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function()
{
var href = $('a[href='+'"'+page+'"'+']').parent();
var parent = $("#nav");
var childToMoveLast = href.remove();
parent.prepend(childToMoveLast);
});
</script>
Here is the HTML
<nav>
<ul id='nav'>
<li>Home</li>
<li>Skillsets</li>
<li><icon>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>