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/
Related
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">
I asign class to element but after loading page the class is removed.
I use this function in my script.js
$('#main-nav li ul li a').click(function(){
$('#main-nav li ul li').children().removeClass('current');
$(this).addClass('current');
});
and this in my PHP view:
<ul id="main-nav"> <!-- Accordion Menu -->
<li>
<a href="#" class="nav-top-item no-submenu"> <!-- Add the class "no-submenu" to menu items with no sub menu -->
On site
</a>
</li>
<li>
<a href="#" class="nav-top-item current"> <!-- Add the class "current" to current menu item -->
Programs
</a>
<ul>
<li>Manage country</li>
<li>Manage channel</li>
<li>Manage Comments</li>
<li>Manage Categories</li>
</ul>
</li>
</ul> <!-- End #main-nav -->
If I use this <li>Manage</li> the class current is added but after load is removed.
How can I add class if I use php code after load page or have you any solution ?
jQuery is scripting language ... When loading the page it will definitely remove your previous functionality as click event doesn't fired so it won't work....
After loading the page just put some logic through PHP ....
with JQuery you can execute code when page is loaded :
$(document).ready(function(){
// your code here
});
this should work:
$(document).ready(function(){
$('#main-nav li > a').click(function(e){
$('#main-nav a').removeClass('current');
$(e.target).addClass('current');
});
});
if it doesn't work, try this block of script before </body> at the end of your document:
<script type="text/javascript">
$(function(){
$('#main-nav li > a').click(function(e){
$('#main-nav a').removeClass('current');
$(e.target).addClass('current');
});
});
</script>
this will force the execution after all the html is rendered by the php
First of all wrap your function in a $(document). ready(function () {}) and use the $('#main-nav'). on('click', 'li > a', function () {} ) approach inside of it. . on() is better to attach event listener to an dynamically loaded elements.
I use a simple jquery code for tabs, the idea of it: in each tab I have a form when i submit each form the code will give me values from mysql . The problem is when i submit a form in for example tab 3 it will redirect me to the first tab (default tab), before I show any result.
any suggestion to solve this problem.
thanks in advance,
My Code :
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
});
</script>
HTML code :
<div id="tabs">
<ul>
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
<div id="tabs-1">
<p>tab 1 content</p>
</div>
<div id="tabs-2">
<p>tab 2 content</p>
</div>
<div id="tabs-3">
<p>tab 3 content</p>
</div>
</div>
If you use php, you could use for e.g. hidden html-field in form which contains number of the tab. When submitting form you could parse that variable and use it in jQuery-code. If you use php inside jQuery code could look like this:
$("#tabs").tabs({
selected: <?php echo (isset($_POST['selected_tab']) ? $_POST['selected_tab'] : 1)?>
});
You jest use this code
$( ".selector" ).tabs( "load", 2 );
after loading call this one so you can select 2 tab.
Try it!!
You can pass parameters to tabs() function (http://api.jqueryui.com/tabs/)
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs({active: 2});
});
</script>
you said "forms" if you submit the form, the page will send data and refresh itself. Just use a button and when the button is clicked, send the ajax.
I have a main php file where i have a 'navbar' with links to various pages, on click of the 'navbar' item i want the content of the div replace with the respective page.
navbar.php:
<li id="nav-home"><a class="button" href="main.php">Home</a></li>
<li id="nav-attn"><a class="button" href="?nav=page1.php">Page1</a></li>
<li id="nav-tran"><a class="button" href="?nav=page2.php">Page2</a></li>
<li id="nav-mr"><a class="button" href="?nav=page3.php">Page3</a></li>
main.php:
<script>
$(document).ready(function() {
$('#content').load('<?php echo $_GET['nav'] ?>');
});
</script>
With this code am expecting that on click of the navbar item the div content has to change to respective page reference.
what i found is, for example when i click on page1 my url is being changed to main?nav=page1.php, but the script to change the div content is not triggered at all.
Please correct me however i don't want to change the link to '#'.
<script>
$(document).ready(function() {
$('uL#navbar a').click(function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
You may try this
$(document).ready(function() {
$('ul li a.button').on('click', function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
You need to use AJAX for it
<script>
$(function(){
$('.button').on('click', function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
});
})
</script>
<li id="nav-home"><a class="button" href="main.php">Home</a></li>
<li id="nav-attn"><a class="button" href="?nav=page1.php">Page1</a></li>
<li id="nav-tran"><a class="button" href="?nav=page2.php">Page2</a></li>
<li id="nav-mr"><a class="button" href="?nav=page3.php">Page3</a></li>
<div id="content"></div>
Try;
$(document).ready(function() {
$('.button').on('click', function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
in your php, change code so that the echo look like;
<li id="nav-attn"><a class="button" href="yourpage.php?nav=page1.php">Page1</a></li>
I have this javascript :
<script type="text/javascript">
$(document).ready(function($) {
$('#target-share ul li').click(function() {
$('input#shareto').val($(this).data('val'));
});
});
</script>
and it really works as I expected. but when I add this another javascript to do drop-down animation, that javascript not working anymore :
<script type="text/javascript">
$(document).ready(function() {
$("#select-shareto a").click(function () {
var newClass = $(this).find("span").attr('class');
var newText = $(this).find("span").text();
$("#select-shareto a").removeClass("selected");
$(this).addClass("selected");
$("a#to-chosen span").removeClass().addClass(newClass).text(newText);
$("a#to-chosen").toggleClass("opened");
$('#select-shareto').slideToggle('fast');
return false;
});
$('a#to-chosen').click(function() {
$(this).toggleClass("opened");
$('#select-shareto').slideToggle('fast', function() {
// Animation complete.
});
});
});
</script>
those javascript actually affected on this HTML code :
<div id="target-share">
<span class="to-admin">Admin</span>
<ul id="select-shareto">
<li data-val="0-1">
<span class="to-Finance">Finance</span>
</li>
<li data-val="1-1">
<span class="to-admin-private">Admin Private</span>
</li>
<li data-val="1-0">
<span class="to-ceo">CEO</span>
</li>
<li data-val="0-0">
<span class="to-ceo-private">CEO Private</span>
</li>
</ul>
<input id="shareto" type="text" value="0-1" name="shareto">
</div><!-- #target-share -->
any idea how to make those 2 javascript works side-by-side? thanks.
$("#select-shareto a").click(function () {
...
return false;
});
Hereby, you stop the further propagation of this event - other handlers for this click event won't be called any more. Instead, use this:
$("#select-shareto a").click(function (e) {
e.preventDefault();
...
});
(Demo at jsfiddle.net)
I'm assuming you tried to insert the code where the comment animation complete is and if so you just need to put the code:$('#target-share ul li').click(function() { $('input#shareto').val($(this).data('val'));});
Your code is already wrapped in a $(document).ready so you don't need another one.