Please have a look at http://iglica.dbox.pl/modx/ (clients graphical project)
Check "KURSY" on the menu - on the homepage everything is okay, the menu slides, I can pick something from the sub-menu, etc. Somehow, when I click on "KURSY" from every other place, MODX redirects me to the homepage.
The code responsible for the menu is in menu.min.js (I`ve bought it specially for this website - I'm not a jQuery familiar).
P.S.
I've tried this http://rtfm.modx.com/display/revolution20/Named+Anchor with no luck
P.S.
jQuery -
$(function () {
$('#mainNav ul li.slide a').click(function () {
var content = ($(this).parent().find("div").html());
$('#navWrapper #subNav #subNavContainer').fadeOut(100, function () {
$('#navWrapper #subNav #subNavContainer').html(content);
$('#navWrapper #subNav #subNavContainer').fadeIn(100);
$('#navWrapper').stop(false, false).animate({
'left': 0
}, 300)
})
});
$('#navWrapper').mouseleave(function () {
$('#navWrapper').stop(false, false).animate({
'left': -200
}, 300)
})
});
Try to replace the a tags which you don't want to do anything with span tags and see if your js code still works fine. Maybe you have to look at your css styles afterwards.
<li class="slide"><span>Kursy</span>
<div class="submenu">
<ul id="submenu">
<li>Dla dzieci</li>
<li>Dla młodzieży</li>
<li>Dla dorosłych</li>
</ul>
</div>
</li>
Ok, when slide functions are triggered by anchor may try a js workaround:
HTML
<li class="slide">Kursy
<div class="submenu">
<ul id="submenu">
<li>Dla dzieci</li>
<li>Dla młodzieży</li>
<li>Dla dorosłych</li>
</ul>
</div>
</li>
JS
(function ($) {
$(window).ready(function () {
$('.preventdefault').on("click", function (e) {
//Uncomment if the anchor is required on the url
//document.location.hash = $(this).attr('href');
return false;
});
});
}(jQuery));
Your code extended + adding html class:
$(function () {
$('#mainNav ul li.slide a').click(function (e) {
var content = ($(this).parent().find("div").html());
$('#navWrapper #subNav #subNavContainer').fadeOut(100, function () {
$('#navWrapper #subNav #subNavContainer').html(content);
$('#navWrapper #subNav #subNavContainer').fadeIn(100);
$('#navWrapper').stop(false, false).animate({
'left': 0
}, 300)
})
if ($(this).hasClass('preventdefault')) {
//Uncomment if the anchor is required on the url
//document.location.hash = $(this).attr('href');
e.preventDefault();
e.stopPropagation();
}
});
$('#navWrapper').mouseleave(function () {
$('#navWrapper').stop(false, false).animate({
'left': -200
}, 300)
})
});
Related
I am working on a project in PHP and I couldn't add ClassActive to the bootstrap Navbar
<?php foreach ($category as $cat){echo <li class="nav-item><a class="nav-link" aria-current="page" href="categories.php?pageid='.$cat['ID'].'">' .$cat['Name']. '</a></li>';}?>
Jquery=>
$('.navbar-nav .nav-item a').click(function(e) {
$('.navbar-nav .nav-item a').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
//e.preventDefault();
});
When you click the link in the navigation, the browser will go to that link. To prevent this, you have the line commented out (e.preventDefault). If the application is not a single page application, you can write a function which will be executed on each page load [$(document).on('load, ()=>{});] where you check for the current URL and add the class .active to the corresponding element.
possible solution here How do I make Bootstrap navbar change active state?
Or like this code from GeeksForGeeks
<script>
/* Code for changing active
link on clicking */
var btns =
$("#navigation .navbar-nav .nav-link");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click",
function () {
var current = document
.getElementsByClassName("active");
current[0].className = current[0]
.className.replace(" active", "");
this.className += " active";
});
}
/* Code for changing active
link on Scrolling */
$(window).scroll(function () {
var distance = $(window).scrollTop();
$('.page-section').each(function (i) {
if ($(this).position().top
<= distance + 250) {
$('.navbar-nav a.active')
.removeClass('active');
$('.navbar-nav a').eq(i)
.addClass('active');
}
});
}).scroll();
</script>
My code is work fine.. but I like save the order in Mysql of the second column as soon as I make any changes... The PHP programming I can do, just do not know how to send the changes to php file
See my code ( complete code in: http://jsfiddle.net/helpinspireme/wMnsa/ )
<ul id="unassigned_list" class="connected_sortable">
<li class="ui-state-default"><div class="draggable_area">Item 1</div><div class="click_area">→</div><div class="cl"></div></li>
<li class="ui-state-default"><div class="draggable_area">Item 2</div><div class="click_area">→</div><div class="cl"></div></li>
</ul>
<ul id="recipients_list" class="connected_sortable">
<li class="ui-state-highlight"><div class="draggable_area">Item 3</div><div class="click_area">←</div><div class="cl"></div></li>
<li class="ui-state-highlight"><div class="draggable_area">Item 4</div><div class="click_area">←</div><div class="cl"></div></li>
</ul>
<script>
$("#unassigned_list, #recipients_list").sortable({
connectWith: ".connected_sortable",
items: "li",
handle: ".draggable_area",
stop: function(event, ui) {
updateLi(ui.item);
}
}).disableSelection().on("click", ".click_area", function() {
// First figure out which list the clicked element is NOT in...
var otherUL = $("#unassigned_list, #recipients_list").not($(this).closest("ul"));
var li = $(this).closest("li");
// Move the li to the other list. prependTo() can also be used instead of appendTo().
li.detach().appendTo(otherUL);
// Finally, switch the class on the li, and change the arrow's direction.
updateLi(li);
});
function updateLi(li) {
var clickArea = li.find(".click_area");
if (li.closest("ul").is("#recipients_list")) {
li.removeClass("ui-state-default").addClass("ui-state-highlight");
clickArea.html('←');
} else {
li.removeClass("ui-state-highlight").addClass("ui-state-default");
clickArea.html('→');
}
}
</script>
You can do it by adding id to elements and adding code below to sortable:
update: function() {
var order = $(this).sortable('toArray');
alert(order);
}
Online demo (jsFiddle)
I have the following code:
$(document).ready(function(){
$("div.subtab_left li.notebook a").click(function(event) {
event.preventDefault();
return false;
});
});
but when I click the element .. it doesn't prevent the default action .. Why?
and when modifying the code to:
$(document).ready(function(){
$("div.subtab_left li.notebook a").click(function() {
e.preventDefault();
alert("asdasdad");
return false;
});
});
it stops the default action but does not alert .. I couldn't find any answer on jQuery docs.
The full code goes like this:
$(document).ready(function(){
$('#tabs div.tab').hide();
$('#tabs div.tab:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div.tab').hide();
$(currentTab).show();
return false;
});
$("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
alert("asdasdad");
return false;
});
});
and the HTML structure is:
<div id="tabs">
<ul id="nav">
<li><a id="tab1" href="#tab-1"></a></li>
<li><a id="tab2" href="#tab-2"></a></li>
<li><a id="tab3" href="#tab-3"></a></li>
<li><a id="tab4" href="#tab-4"></a></li>
</ul>
<div class="tab" id="tab-1">
<script type="text/javascript">$(document).ready(function(){$("ul.produse li").hover(function () {
$("ul.produse li").removeClass('active');$(this).addClass('active');}, function () {$(this).removeClass('active');});});
</script>
<div class="subtab_left">
<ul>
<li class="notebook">1</li>
<li class="netbook">2</li>
<li class="allinone">2</li>
<li class="desktop">2</li>
<li class="procesoare">2</li>
<li class="placi_video">2</li>
<li class="hdd_desktop">2</li>
<li class="tv_plasma">2</li>
<li class="tv_lcd">2</li>
<li class="telefoane_mobile last_item">2</li>
</ul>
</div>
Update
And there's your problem - you do have to click event handlers for some a elements. In this case, the order in which you attach the handlers matters since they'll be fired in that order.
Here's a working fiddle that shows the behaviour you want.
This should be your code:
$(document).ready(function(){
$('#tabs div.tab').hide();
$('#tabs div.tab:first').show();
$('#tabs ul li:first').addClass('active');
$("div.subtab_left li.notebook a").click(function(e) {
e.stopImmediatePropagation();
alert("asdasdad");
return false;
});
$('#tabs ul li a').click(function(){
alert("Handling link click");
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div.tab').hide();
$(currentTab).show();
return false;
});
});
Note that the order of attaching the handlers has been exchanged and e.stopImmediatePropagation() is used to stop the other click handler from firing while return false is used to stop the default behaviour of following the link (as well as stopping the bubbling of the event. You may find that you need to use only e.stopPropagation).
Play around with this, if you remove the e.stopImmediatePropagation() you'll find that the second click handler's alert will fire after the first alert. Removing the return false will have no effect on this behaviour but will cause links to be followed by the browser.
Note
A better fix might be to ensure that the selectors return completely different sets of elements so there is no overlap but this might not always be possible in which case the solution described above might be one way to consider.
I don't see why your first code snippet would not work. What's the default action that you're seeing that you want to stop?
If you've attached other event handlers to the link, you should look into event.stopPropagation() and event.stopImmediatePropagation() instead. Note that return false is equivalent to calling both event.preventDefault and event.stopPropagation()ref
In your second code snippet, e is not defined. So an error would thrown at e.preventDefault() and the next lines never execute.
In other words
$("div.subtab_left li.notebook a").click(function() {
e.preventDefault();
alert("asdasdad");
return false;
});
should be
//note the e declared in the function parameters now
$("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
alert("asdasdad");
return false;
});
Here's a working example showing that this code indeed does work and that return false is not really required if you only want to stop the following of a link.
Try this one:
$("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
return false;
});
If e.preventDefault(); is not working you must use e.stopImmediatePropagation(); instead.
For further informations take a look at : What's the difference between event.stopPropagation and event.preventDefault?
$("div.subtab_left li.notebook a").click(function(e) {
e.stopImmediatePropagation();
return false;
});
Try this:
$("div.subtab_left li.notebook a").click(function(e) {
e.preventDefault();
});
If you already test with a submit action, you have noticed that not works too.
The reason is the form is alread posted in a $(document).read(...
So, all you need to do is change that to $(document).load(...
Now, in the moment of you browaser load the page, he will execute.
And will work ;D
i just had the same problems - have been testing a lot of different stuff. but it just wouldn't work.
then i checked the tutorial examples on jQuery.com again and found out:
your jQuery script needs to be after the elements you are referring to !
so your script needs to be after the html-code you want to access!
seems like jQuery can't access it otherwise.
The Question
How could I make it where when you pull <div id="content"> down, it does a function and shows a div at the top of the screen that says "Pull Down To Refresh"?
I know iScroll does this, but it won't work with what I'm trying to do. It only works with UL's.
Here is my HTML
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...
</span>
</div>
<div id="content">
(There is a bunch of items that are loaded in via jquery and php, when you pull down to refresh, I want it to basically react that function.)
</div>
<script>
$(function() {
var refreshCallback = function(loader) {
setTimeout(function(){
//loader.finish();
}, 1000);
};
var cancelRefreshing = function() {
};
$("#draggable").pulltorefresh({
async: true,
// event triggered when refreshing start
refresh: function(event, finishCallback) {
element = $(this)
setTimeout(function(){
alert("refresh");
// you must call this function if refreshing process runs asynchronusly
finishCallback();
}, 1000);
},
abort: function() {
alert("abort");
}
});
});
</script>
for full Demo Click Here
You can provide with iScroll plugin.
iScroll 4: http://cubiq.org/iscroll-4
Github Page: https://github.com/cubiq/iscroll
Demo: http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/
try this
$( "#pullDown" ).on( "dragstart", function( event, ui ) {} );
inside the function u can have the ajax call to load the content
$("#content").load("<something.php>");
that is on the whole
$( "#pullDown" ).on( "dragstart", function() {
$("#content").load("<something.php>");
} );
Ok this is my issue if anyone can help, please.
I have a href that div id to switch content - I would like to add another document ready function javascript without conflicting with make tab I have already.
Example of make tab already:
<script type="text/javascript">
{literal}
$(document).ready(function(){
function makeTabs(selector) {
var tabContainers = $(selector + ' > div');
tabContainers.removeClass("selected").filter(':first').addClass("selected");
galleryRendered = false;
$(selector + ' > ul a').click(function () {
tabContainers.removeClass("selected");
tabContainers.filter(this.hash).addClass("selected");
$(selector + ' > ul a').removeClass('selected');
$(this).addClass('selected');
if (this.hash == '#Pictures' && !galleryRendered)
{
var galleries = $('.pictures > .ad-gallery').adGallery({
effect : 'slide-hori',
enable_keyboard_move : true,
cycle : true,
animation_speed : 400,
slideshow: {
enable: false
},
callbacks: {
init: function() {
this.preloadImage(0);
this.preloadImage(1);
this.preloadImage(2);
}
}
});
galleryRendered = true;
}
if (this.hash == '#OnTheMap') document.getElementById("Map").map.onContainerChanged();
return false;
}).filter(':first').click();
}
makeTabs('.tabs');
});
{/literal}
</script>
Want to create a second one so I can create tabs inside of an existing div id area/content to switch from photo to video to youtube.
<div class=".tabs"><ul><li>[[Photo]]</li><li>[[Youtube]]</li><li>[[Video]]</li></ul><div id="photo">Test</div><div id="tube">Test</div><div id="vid">Test</div></div>
This will be inside a div id that already exist that uses the first tab creator shown above.
In jQuery you just have to do this:
$(function(){
// code here
});
$(function(){
// more code here
});
Every function declared like this will be executed on domready.