Got a problem with my WordPress menu. After I insert the jquery my links (in the menu and in sidebars won't work. What to do? Thank you!
My code:
HTML
<ul class="menu">
<li class="menu-item">
Link text
<ul class="sub-menu">
<li><a>Text</a></li>
<li><a>Text</a></li>
<li><a>Text</a></li>
</ul>
</li>
</ul>
jQuery
$(document).ready(function(){
$('li.menu-item').each(function() {
var $dropdown = $(this);
$($dropdown).click(".menu-item a", function(e) {
e.preventDefault();
$ul = $("ul.sub-menu", $dropdown);
$('ul.sub-menu').toggle();
$("ul.sub-menu").not($ul).hide();
return false;
});
});
$('html').click(function(){
$("ul.sub-menu").hide();
});
});
There might be a problem with the event propagation. If a link within a sub-menu is clicked the click event propagates to the surrounding menu-item and triggers your JS code.
Please try to add this code to prevent the propagation effect:
$( "ul.sub-menu a" ).click(function( event ) {
event.stopPropagation();
});
please fix the issue by replacing below script
<li class="menu-item> to <li class="menu-item">
Related
I have a list
<ul id="my_ul">
<li data-value="1">111</li>
<li data-value="2">112</li>
<li data-value="3">113</li>
</ul>
I tried to pass the data-value on click event to MySQL query. I tried it with jQuery but when i var_dump the result its NULL.
Here is how i am getting the value
$('#my_ul').on("click", "li", function(){
$.ajax("fetch_test.php",{method:"post", data:{val:$(this).attr("data-value")}});
});
and here is the fetch_test.php file code :
function showValue(){
include_once "connect.php";
$test=$_SESSION['val'];
$query="SELECT * FROM product INNER JOIN smetka on smetka.id=product.smetka_id WHERE product.smetka_id=$test";
$result=mysqli_query($conn,$query);
$alert="";
while($row=mysqli_fetch_array($result)){
$alert .="<li data-value='$row[id]'><a href='test.php'>$row[name]";
$alert .= "</a></li>";
}
return $alert;
}
How can i pass the data-value from the li?
You should bind the event handler with anchor element and use event.preventDefault() to cancel its the default action. You can use .closest() to traverse up to li element.
$('#my_ul').on("click", "li a", function(e) {
//Cancels default action of anchor
e.preventDefault();
var value = $(e.target).closest('li').data("value");
console.log(value);
$.ajax({url: "fetch_test.php", method:"post", data:{val:value}});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="my_ul">
<li data-value="1">111</li>
<li data-value="2">112</li>
<li data-value="3">113</li>
</ul>
Use event.preventDefault() to prevent redirection to test.php
Instead of
$('#my_ul').on("click", "li", function(){
$.ajax("fetch_test.php",{method:"post", data:{val:$(this).attr("data-value")}});
});
Use
$('#my_ul').on("click", "li", function(event){
event.preventDefault();
$.ajax("fetch_test.php",{method:"post", data:{val:$(this).attr("data-value")}});
});
I am working on a single page website, I have following navigation bars:
<ul class="nav navbar-nav navbar-right">
<li><i></i>HOME</li>
<li><i></i>Accommodation</li>
<li><i></i>activities</li>
<li><i></i>>gallery</li>
<li><i></i>>contact</li>
</ul>
its working on the section id in the section tag. like
<section id="home">
<section id="accommadation">
how to give class="active" for navigation?
Try this
<ul class="nav navbar-nav navbar-right">
<li><i></i>HOME</li>
<li><i></i>Accommodation</li>
<li><i></i>activities</li>
<li><i></i>>gallery</li>
<li><i></i>>contact</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('.nav_menu').click(function(){
$('.nav_menu.active').removeClass('active');
$(this).addClass('active');
});
});
</script>
Its not dependent on Codeigniter or PHP as it is Single page website you need some client side javascript code or use jQuery like,
$(function(){
$('.navbar-nav a[href^=#]').on('click',function(e){
$('.navbar-nav a.active').removeClass('active');
$(this).addClass('active');
// if you want some animation for the element to scroll then use animate()
$('html,body').animate({scrollTop:$(this.href).offset().top},900);
});
});
I am using a Font Awesome check-box on/off and the below script to toggle off and on when clicked.
This works fine if my links are #, but I recently changed my links to submit a form on a click of the check-box. This issue is once the page reloads, the checkbox goes back to the initial on state. I am not a Javascript pro and I am wondering if I can pass a variable to the script to set the state off/on?
<ul id="setting-cb">
<li class="wet-asphalt"><i class="fa fa-check-square-o wet-asphalt"></i> Checkbox 1</li>
</ul>
<script>
$('#setting-cb li a').click(function(){
$(this).next('ul').slideToggle('500');
$(this).find('i').toggleClass('fa-square-o fa-check-square-o')
});
</script>
As discussed, because you already added the value to a hidden input you can simply catch it again using this:
class="<?=($_POST['your_checkbox_name'] == 'x')?'class_name':''?>"
Try to perform an Ajax call.
Here's an example:
JS:
$("#setting-cb li a").click(function(e) {
e.preventDefault();
$(this).next('ul').slideToggle('500');
$(this).find('i').toggleClass('fa-square-o')
$.ajax({
url: '/destination.php',
type: 'POST',
data: {
//your data Here
},
success: function(response) {
//Do something here...
}
});
});
HTML:
<ul id="setting-cb">
<li class="wet-asphalt"><i class="fa fa-check-square-o wet-asphalt fa-square-o"></i> Checkbox 1</li>
</ul>
Fiddle
The correct, working code can be seen on the replies. End result: http://www.creativewebgroup.co.uk/library/colorshareV2/palette/Android
I'm attempting to make a colour palette script.
I have this jQuery script:
<script>
//document ready
$(document).ready(function () {
$('.palette-detail li').each(function () {
$(this).html('<input type="text" style="background: #' + $(this).attr('swatch') + '" />' );
});
$('.palette-detail').click(function (e) {
var elem = e.target;
if ($(elem).is('input')) {
$(elem).val($(elem).parent().attr('swatch'));
}
});
});
Here's a basic idea of the HTML used (in the script however it's PHP driven).
<ul class="palette">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<span>Title</span>
</ul>
At the moment the script requires the user to click on a li block for the hex code to display. I want it to instead show straight away.
Is this possible? If so how?
Thanks a bunch guys!
HTML
<ul class="palette">
<li swatch="#4362ff">
<li swatch="#ee3d5f">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
</ul><span>Title</span>
jQuery
//document ready
$(document).ready(function () {
$('.palette li').each(function () {
$(this).html('<input value='+$(this).attr("swatch")+' type="text" style="background: ' + $(this).attr('swatch') + '" />');
});
});
fiddle
There were lots of mistakes in the code. You didn't select the correct class for the UL.
Also UL elements can not contain span elements.
Also using inspect element would have showed the code does what it told it to and put ## on front of the color.
i have a php view and i want to change the class after clicked
<ul>
<li> Home</li>
<li>Messages</li>
</ul>
<script src="<?=base_url()?>js/libs/jquery-1.7.2.min.js"></script>
<script type="application/javascript">
function select_class(id){
if(id=='mesg'){
$('#'+id).addClass('current');
$('#home').removeClass('current');
}
else{
$('#home').addClass('current');
$('#mesg').removeClass('current');
}
}
</script>
how can i select the selected value to make this visible and remove previous one
I was also facing this problem but I just change the selected class and place it to
<a class='current'>
from css then it works for me try yourself then your problem will solve and also do this
$(document).ready(function(){
$('#shortcuts li a').each(function(index) {
if(this.href.trim() == window.location)
$(this).addClass("current");
});
});
</script>
You should use .toggleClass() instead.
http://api.jquery.com/toggleClass
Please change js type
<script type="application/javascript">
to
<script type="text/javascript">
<ul id="example">
<li>Test</li>
<li>test 2</li>
</ul>
$('#example li').click(function(e){
$('#example li').removeClass('current');
$(this).addClass('current');
e.preventDefault();
});
Fiddle here http://jsfiddle.net/mRKC6/