I have created a listview in jquery with a listdivider with a filter. The filter works as expected but as soon as you collapse either of the list dividers, the search subsequently does not work at all,
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=" <link rel="stylesheet" href="<%=request.getContextPath()%>/css/mobile/jquery.mobile.structure-1.3.1.min.css" />
<script src="<%=request.getContextPath()%>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
jQuery(document).bind("mobileinit", function () {
jQuery.mobile.ajaxEnabled = false;
});
</script>
<script src="<%=request.getContextPath()%>/js/mobile/jquery.mobile-1.3.1.min.js"></script>
<script>
var hide=0;
var dpwClone='';
$(function(){
$('[data-role="list-divider"]').click(function(element){
$(this).nextUntil('[data-role="list-divider"]').toggle();
$("#eServiceList").listview("refresh");
// $(this).nextUntil('[data-role="list-divider"]').toggle();
});
$( "#eServiceList" ).listview( "option", "filterCallback", searchList);
function searchList( text, searchValue, item ) {
var result = text.toString().toLowerCase().indexOf( searchValue.toString().toLowerCase() );
var show = false;
var hide = true;
if (result == -1 )
return hide;
return show;
};
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Problem nested list views</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-inset="true" data-divider-theme="d" data-filter="true" id="eServiceList">
<li data-role="list-divider" id="dpw" >
DPW
</li>
<li>Inbox</li>
<li>Outbox</li>
<li data-role="list-divider" id="custo">
Customs
</li>
<li>Friends</li>
<li>Work</li>
</ul>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
Below is the JSfiddle link.
http://jsfiddle.net/jsfiddle_one/R8pZH/
Using .toggle() adds to the element an inline style attribute style="display: none;" or style="display: block;". List items are already enhanced with display: block; by jQuery Mobile. Hence, when using .toggle() - when it is visible again - the element will get display: block; twice, inline and in CSS style sheet.
To overcome this problem, use .toggleClass() classes rather than inline styling. I fixed your problem by adding a class
.hide { display: none !important; }
and I used it with .toggleClass('hide');
New code
Using custom CSS classes to override existing CSS is safer, and keep in mind that for jQuery Mobile, it's better to end each property with !important to force override.
Related
I am trying to accomplish designing a filter/search feature that allows the user to easily search through a list for an item. I was told that I could accomplish this by using a Bootstrap combo box, however I have not seen any that have the ability to show the user values as soon as they start typing. The only ones I have found online where you had to click a button to see a drop down of the values.
This is the code I tried using, it works but instead I would like it to drop down the list only when I click the search input field. I am trying to make it without a button.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Filterable List</h2>
<p>Type something in the input field to search the list for specific items:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<ul class="list-group" id="myList">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
I tried adding this Javascritpt function, but it did not work.
Snippet:
function myFunction() {
document.getElementById("myList").classList.toggle("show");
}
You can hide automatically by triggering the toggle function in the page load. And to show the list you can use the toggle function again in focus event and to hide it again you can use it on the focus out event
<script>
$(document).ready(function(){
$("#myList").toggle();
$("#myInput").on("focus", function() {
$("#myList").toggle();
});
$("#myInput").on("focusout", function() {
$("#myList").toggle();
});
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList li").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_accordion_links
^^^ This is the link to what I need changed. Specifically, when you activate the accordion, there are 3 links inside. I want to change the color of the "hover" on the "links" but, cannot figure out how to do it. I can change the color of both the button background and the link background.
However, the "light-grey" hover affect is driving me crazy. Thanks in advance for your help!!!
simply add this code before body (!important forces the element to take this style!)
<style>
a:hover{background-color: green!important;}
</style>
or you can make yor own stylesheet and include it after the w3 stylesheet in the html before body tag (it is good practice to use a head tag)..you wount need the !important part if you include your own stylesheet after the original one because the repeated styles are being overwriten.
style.css:
a:hover{
background-color: green;
}
HTML file:
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="w3-container">
<h2>Accordions</h2>
<p>An accordion with links:</p>
<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">
Accordion 1
</button>
<div id="Demo1" class="w3-accordion-content">
Link 1
Link 2
Link 3
</div>
<button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align">
Accordion 2
</button>
<div id="Demo2" class="w3-accordion-content">
<a class="w3-padding-16" href="#">Link 1</a>
<a class="w3-padding-16" href="#">Link 2</a>
<a class="w3-padding-16" href="#">Link 3</a>
</div>
</div>
</div>
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>
and if you are interested you can read this docoment for some more cool functionality using css selectors
I recommend loading your own css file after the one you have in the example:
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="mycssfileurl">
In that you should be able to override it like
#Demo1 a:hover {
background-color:#FF0000;
}
I was wondering how to make the individual menu items fade in with delay on page load.
I would like them to fade in not in a chronological order, so let's say first to appear would be #item 3, then #item 1, then #item 5 and so on...
How would such a jQuery or JavaScript code look and where in the code would I need to paste it?
Thanks a lot for help!
This should do the job. Basically give the elements that you want to fadeIn a class of hidden, or any other class name that you can target. You then set the display of that class to "none". Using jQuery you target each item that you want to fadeIn by its ID and you set a desired delay() before that item will be fadedIn using the fadeIn() function.
So in this example #item2 will fadeIn after 1500ms, #item3 after 2500ms and #item1 after 4000ms.
Hope this helps!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fade In</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li id="item1" class="hidden">First</li>
<li id="item2" class="hidden">Second</li>
<li id="item3" class="hidden">Third</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#item1').delay(4000).fadeIn('slow')
$('#item3').delay(2500).fadeIn('slow')
$('#item2').delay(1500).fadeIn('slow')
})
</script>
</body>
</html>
You can use setTimeout and put it into a closure and work.
$(function () {
var currentTime = 0;
$("#item1, #item2, #item3")
.hide()
.each(function () {
(function (which, currentTime) {
setTimeout(function () {
which.fadeIn(100);
}, currentTime);
})($(this), currentTime);
currentTime += 2500;
});
});
div {background: #ccf; margin: 10px; line-height: 100px; text-align: center;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div id="item1">This is menu 1.</div>
<div id="item2">This is menu 2.</div>
<div id="item3">This is menu 3.</div>
Full Code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8" />
<script>
$(function () {
var currentTime = 0;
$("#item3, #item1, #item2")
.hide()
.each(function () {
(function (which, currentTime) {
setTimeout(function () {
which.fadeIn(100);
}, currentTime);
})($(this), currentTime);
currentTime += 2500;
});
});
</script>
<style>
div {background: #ccf; margin: 10px; line-height: 100px; text-align: center;}
</style>
<title>My Menus</title>
</head>
<body>
<div id="item1">This is menu 1.</div>
<div id="item2">This is menu 2.</div>
<div id="item3">This is menu 3.</div>
</body>
</html>
This can be achieved by following these steps:
1. Set the "display" property of the elements to "none" in CSS
2. Put your code in "$(document).ready(function(){ here })" after including the jQuery library
3. Set the delay(value) to the elements as needed for the order you want to show the elements
4. Call the fade function or any other effect or function for the elements
You can make the elements appear in any order you want, you just need to set the delay(value) accordingly. The later you want the elements to appear, the higher should you set this value.
In this example the elements appear in chronological order, just change the delay(value) to suit your needs. You can select the elements according to your needs. For example, here ID isn't used to select the elements, but can be used as well. This method works great too!
Remember to include the jQuery library first!
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: none
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("li:nth-child(1)").fadeIn();
$("li:nth-child(2)").delay("1000").fadeIn();
$("li:nth-child(3)").delay("2000").fadeIn();
$("li:nth-child(4)").delay("3000").fadeIn();
$("li:nth-child(5)").delay("4000").fadeIn();
$("li:nth-child(6)").delay("5000").fadeIn();
$("li:nth-child(7)").delay("6000").fadeIn();
$("li:nth-child(8)").delay("7000").fadeIn();
$("li:nth-child(9)").delay("8000").fadeIn();
$("li:nth-child(10)").delay("9000").fadeIn();
});
</script>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
<li>Eighth</li>
<li>Ninth</li>
<li>Tenth</li>
</ul>
</body>
</html>
Assuming a list like this of unknown number of items
<div class="fadein-delay">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
...
</div>
you will a more modular script
$(function () {
$(".fadein-delay > div").each(function(index) {
console.log($(this).text());
$(this).delay(300*index).fadeIn(600);
});
});
and css that hides all items initially
.fadein-delay > div {
display: none;
}
Here is a working example https://codepen.io/giorgosk/pen/aVpXad
I have 5 links which act as a bit of a navigation bar, they are a light blue to start with, when one of them is hovered over or clicked I would like them to change color and retain that color until another link is selected.
I have had a good search for a solution and there are many but they all seem to be for a particular case and I just can't seem to adapt them.
Any help would be greatly appreciated.
heres my html here, I have a css file making it look pretty as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs({
event: "mouseover"
});
});
</script>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Menu bar</title>
<style type="text/css" />
</style>
<link href="navPanelStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="tabs">
<div id="topBar">
<ul>
<li>BOOKINGS</li>
<li>ROOMS</li>
<li>NEWS</li>
<li>SPECIALS</li>
<li>ABOUT US</li>
</ul>
</div>
<div id="content_Wrapper">
<div id="Booking">
<p>Bookings</p>
</div>
<div id="Rooms">
<p>Rooms</p>
</div>
<div id="news">
<p>news</p>
</div>
<div id="Specials">
<p>Specials</p>
</div>
<div id="About_us">
<p>About us</p>
</div>
</div>
</div>
</body>
</html>
If you can use Jquery to do this you can try this way, to retain a style for selected tab.
Demo
JS
$("#tabs").tabs({
event: "mouseover",
select: function (event, ui) {
$('.active').removeClass('active');
$(ui.tab).addClass('active'); // ui.tab in the select event will be currently selected tab.
// Do stuff here
}
});
Css
#tabs .active {
color:Blue;
}
if you want to apply over the entire tabe you can apply your styles to li tab element as follows:-
$(ui.tab).closest('li').addClass('active');
Demo2
You need to set up a piece of hover-over listener JavaScript code that removes active class from the element that was last activated and add it to the one that's hovered over.
Like the following:
$(".menuitem").hover(
function() {
$(this).addClass("active_menuitem");
},
function() {
$(this).removeClass("active_menuitem");
}
)
A menuitem can be anything that the CSS related to the active menu item class can be applied to
I am pretty new to css + html and am coding my first website. I have a navigation menu setup inside a div, but I want to change the font-weight of the clicked text from lighter to bold when the user clicks on an item in it (text). Please can you tell me how to do this?
Here is my code so far:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />
</head>
<body>
<div id="background" />
<div id="navigation" class="navigationPlaceholder">
<div id="navigationText">
<ul>
iOS
Blog
About
Contact
</ul>
</div>
</div>
</body>
</html>
You need to add a click event listener each navigation item and change its font-weight style.
First, start by using an unordered list for your nav
<div id="navigationText">
<ul>
<li>iOS</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
Then, place this script block just before the closing </body> tag
<script type="text/javascript">
var nav = document.getElementById('navigationText');
var navItems = nav.getElementsByTagName('li');
for (var i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
this.style.fontWeight = 'bold';
}, false);
}
</script>
</body>
here you have an example, you should do the same wih your div:
<html>
<head>
<script type="text/javascript">
function displayResult()
{
document.getElementById("p1").style.fontWeight="900";
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
<br />
<button type="button" onclick="displayResult()">Change font weight</button>
</body>
</html>