I am having a terrible time with the first of the following scripts. I'm not sure if the issue is that there are two similar scripts on the page or if my HTML5 code is incorrect. Any help would be appreciated:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.btn').click(function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});
</script>
<script type="text/javascript">
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
</script>
</head>
And the targeted HTML:
<div class=links>
<ul>
<li>
<a href="#" onclick="MM_showHideLayers('what_we_do','','show');MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','hide')" class="active btn" >WHAT WE DO</a> |
</li>
<li>
<a href="#" onclick="MM_showHideLayers('who_we_are','','hide');MM_showHideLayers('our_mission','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" >OUR MISSION</a> |
</li>
<li>
<a href="#" onclick="MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" >WHO WE ARE</a>
</li>
</ul>
</div>
As stated, the problem is in the first script where my intention is that the active anchor should change back to the default anchor attribute as the others are clicked by the user.
Thanks again.
Wrap all into document.ready()
<script>
$(document).ready(function(){
$('.btn').click(function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});
}):
</script>
Related
I created a List in a Dropdown panel from Foundation. In that List I have links. This is my List:
<button class="button plzddmenu" type="button" data-toggle="PLZdropdown">Postleitszahl Suche</button>
<div class="dropdown-pane" id="PLZdropdown" data-dropdown data-auto-focus="true">
<ul class="plzlist">
<li><a class="plzclick">10000 - 19999</a></li>
<li><a class="plzclick">20000 - 39999</a></li>
<li><a class="plzclick">40000 - 59999</a></li>
<li><a class="plzclick">60000 - 79999</a></li>
<li><a class="plzclick">80000 - 99999</a></li>
</ul>
</div>
Now I'm using a jQuery script to detect, if the elements were clicked, and when they're clicked, to write them into the Button. This is my script:
<script type="text/javascript">
$(document).ready(function(){
$('.plzclick').on("click", function(){
$('.plzddmenu').html(this);
});
</script>
It all works fine, besides that my Elements disappear from my List, once I clicked them. Anyone know, why they dissapear and how I can fix this to make them stay?
You are moving your items to the button, You need just to change your button html to the clicked a tag html content.
$(this).html();// retruns the html content of the elemtent.
$(document).ready(function() {
$('.plzclick').on("click", function() {
$('.plzddmenu').html($(this).html());
console.log(this);
console.log($(this));
console.log($(this).html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button class="button plzddmenu" type="button" data-toggle="PLZdropdown">Postleitszahl Suche</button>
<div class="dropdown-pane" id="PLZdropdown" data-dropdown data-auto-focus="true">
<ul class="plzlist">
<li><a class="plzclick">10000 - 19999</a>
</li>
<li><a class="plzclick">20000 - 39999</a>
</li>
<li><a class="plzclick">40000 - 59999</a>
</li>
<li><a class="plzclick">60000 - 79999</a>
</li>
<li><a class="plzclick">80000 - 99999</a>
</li>
</ul>
</div>
<script type="text/javascript">
</script>
I have the below code
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div id="wrap">
<h1>Stylish User Settings Menu</h1>
<div id="dropdown" class="ddmenu">
Landi <img src="../images_app/off.png" width="20" height="20" style="margin-left:100px">
<ul>
<li>My Profile</li>
<li>Friend Requests</li>
<li>Account Settings</li>
<li>Support</li>
<li>Log Out</li>
</ul>
</div>
</div>
<script type="text/javascript">
$("#dropdown").on("click", function(e){
e.preventDefault();
if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).children("ul").slideUp("fast");
} else {
$(this).addClass("open");
$(this).children("ul").slideDown("fast");
}
});
</script>
</body>
</html>
So,my problem is in href="#" when I fill the href for example example.html it is not working... So when I remove the script that content jquery1.8.2 then the href tag works but all my project is destroyed.
Any solution how to solve my problem without remove jQuery?
The problem is that you are preventing default action (in this case the href) with e.preventDefault();. You need to delete it to make the <a> works. Also add target="_blank".
$("#dropdown").on("click", function(e){
if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).children("ul").slideUp("fast");
} else {
$(this).addClass("open");
$(this).children("ul").slideDown("fast");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="dropdown" class="ddmenu">
Landi <img src="../images_app/off.png" width="20" height="20" style="margin-left:100px">
<ul>
<li>My Profile</li>
<li>Friend Requests</li>
<li>Account Settings</li>
<li>Support</li>
<li>Log Out</li>
</ul>
</div>
</div>
Here's a working example
Remove the line e.preventDefault();
what it does is that the default action of the event will not be triggered i.e if you click on a an anchor tag it will not take you to a new url.
so change the script to:
<script type="text/javascript">
$("#dropdown").on("click", function(){
if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).children("ul").slideUp("fast");
} else {
$(this).addClass("open");
$(this).children("ul").slideDown("fast");
}
});
</script>
The reason is you have e.preventDefault() that stops any typical event propagation of that element. http://www.w3schools.com/jquery/event_preventdefault.asp.
If you still don't want the default behavior, then What you can is, some how get the link that need to be open for the the clicked element and open it in a new tab or window or what ever you want
You may include the link to the html like
<ul>
<li>
My Profile
</li>
</ul>
Then in javascript
$("#dropdown").on("click", function(e){
e.preventDefault();
window.open($(this).data("link"), '_blank');
}
I have just posted the code without testing.
guys.I am now using web.py +jQuery to finish a small website.However I encountered a problem.The example code as blow.When I created a group of li elements,the jQuery event only responded to the first element.But others never call the jQuery function.Why it happened?Many thinks:)
html&python
<ul id="products" style="list-style:none;">
$for item in data.response["Galleries"]:
<li style="float:left" id="photoLink">
<a href="$item['PhotoUrl']">
<img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
</a>
<div id="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
</li>
</ul>
jQuery
<script type="text/javascript">
$$(document).ready(function(){
$$("#photoLink").mouseenter(function(){
$$("#img_menu").css("margin-top","-20px");
});
$$("#photoLink").mouseleave(function(){
$$("#img_menu").css("margin-top","0px");
});
});
</script>
In HTML IDs must be unique, use class instead like
<ul id="products" style="list-style:none;">
$for item in data.response["Galleries"]:
<li style="float:left" class="photoLink">
<a href="$item['PhotoUrl']">
<img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
</a>
<div class="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
</li>
</ul>
jQuery
<script type="text/javascript">
$$(document).ready(function(){
$$(".photoLink").mouseenter(function(){
$$(this).find(".img_menu").css("margin-top","-20px");
});
$$(".photoLink").mouseleave(function(){
$$(this).find(".img_menu").css("margin-top","0px");
});
});
</script>
Additionally You can use .hover()
<script type="text/javascript">
$$(document).ready(function(){
$$(".photoLink").hover(function(){
$$(this).find(".img_menu").css("margin-top","-20px");
}, function(){
$$(this).find(".img_menu").css("margin-top","0px");
});
});
</script>
Id can't no be duplicate on the page. They must be unique. If there are same multiple Ids presents on the page, selector selects only the first one. So you need to use class selector instead of Id.
<li style="float:left" class ="photoLink">
<a href="$item['PhotoUrl']">
<img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
</a>
<div class="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
</li>
jQuery
<script type="text/javascript">
$$(document).ready(function(){
$$(".photoLink").mouseenter(function(){
$$(this).find(".img_menu").css("margin-top","-20px");
});
$$("#photoLink").mouseleave(function(){
$$(this).find(".img_menu").css("margin-top","0px");
});
});
</script>
Because ID of ane element mus be unique, use class instead
<ul id="products" style="list-style:none;">
$for item in data.response["Galleries"]:
<li style="float:left" class="photoLink">
<a href="$item['PhotoUrl']">
<img src=$item["PhotoUrl"] alt="加载失败" style="max-width:75px;max-height:75px" title="点击查看大图"/>
</a>
<div class="img_menu" style="height:20px;width:75px;background-color:black;opacity:0.5"/>
</li>
</ul>
then you need to target the img_menu element which is inside the current li
$$(function ($) {
$(".photoLink").hover(function () {
$(this).find(".img_menu").css("margin-top", "-20px");
}, function () {
$(this).find(".img_menu").css("margin-top", "0px");
});
});
I fund a toggle code that works perfectly, but I'd like to add a speed effect to slow it down a bit it when opening and closing. I did try to insert this code on it <p onclick="javascript:setTimeout(toggle(), 3000);">OPEN</p> instead of <h1>OPEN</h1> but without success.
I've a joomla website, some plugins use jquery. It seems that Jquery could do the trick with something like .toggle( [duration ] [, complete ] ) I've seen that JQ is a "Javascript's library", so it should work with the code bellow but no idea how I should insert it. I don't know if "simply" adding jquery code inside the code below would work, or if I should add something else in the FTP website some XX.js files (as I have seen in some tuto). I'm lost...
<script type="text/javascript">
// <![CDATA[
function toggle(id, link) {
var elem = document.getElementById(id);
var text = document.getElementById(link);
if (elem.style.display != "none") {
elem.style.display = "none";
text.innerHTML = "show";
} else {
elem.style.display = "block";
text.innerHTML = "hide";
}
}
// ]]>
</script>
<ul>
<li><a id="displayText" href="javascript:toggle('toggleText', 'displayText');">show</a>
<div id="toggleText" style="display: none;">
<h1>OPEN</h1>
</div></li>
<li><a id="toggler2" href="javascript:toggle('secondText', 'toggler2');">show</a>
<div id="secondText" style="display: none;">
<h1>OPEN</h1>
</div></li>
</ul>
thanks!
Since you are using jquery make some minor changes to the mark up for ease of use
<ul id="container">
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
</ul>
Then
$(function(){
$('#container').on('click', 'a.opener', function(){
$(this).next().toggle('slow')
});
});
Demo: Fiddle
for joomla :
1/ add in the index.php just after the tag this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript"></script>
2/ create in the ftp a file called app.js and write in it:
var $j = jQuery.noConflict();
$(function(){
$('#container').on('click', 'a.opener', function(){
$(this).next().toggle('slow')
});
});
3/ in the article source code :
<ul id="container">
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
<li>
<a class="opener">show</a>
<div style="display: none;">
<h1>OPEN</h1>
</div>
</li>
</ul>
I have a function that remains pretty much constant except for the changing class names. I was hoping to make the code a little less text heavy. How may I go about making it just a small function instead of repeating it n times. My concern is also about removing the active class for the last li that was clicked. I've provided only 2 instances here, but this code is repeated n number of times.Any ideas would be much appreciated.
$('a.app1-preview').click(function() {
//remove last active classes
$(".app2").removeClass('active');
$(".app2-preview").removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$('.app-preview-2').fadeOut("slow", function () {
$('.app-preview-1').fadeIn("slow");
});
});
$('a.app2-preview').click(function() {
//remove last active classes
$(".app1").removeClass('active');
$(".app1-preview").removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$('.app-preview-1').fadeOut("slow", function () {
$('.app-preview-2').fadeIn("slow");
});
});
HTML code:
<div class="app-container">
<ul class="apps">
<li class="app1">
<a title href="#" class="app1-preview blocklink">
<span>ANOTHER<br /> APP</span>
</a>
</li>
<li class="app2">
<a title href="#" class="app2-preview blocklink">
<span>SECOND<br /> APP</span>
</a>
</li>
</div>
Try to exploit the fact that you have .active class. ;) Preview - http://jsfiddle.net/evSqF/1/
js:
<script>
$('a.blocklink').click(function() {
var self = $(this);
$('.active').fadeOut('slow', function(){
$(this).removeClass('active');
self.fadeIn('slow');
self.addClass('active');
});
});
</script>
html:
<div class="app-container">
<ul class="apps">
<li class="app1">
<a title href="#" class="app1-preview blocklink">
<span>ANOTHER<br /> APP</span>
</a>
<div class="app-preview active">App1 preview</div>
</li>
<li class="app2">
<a title href="#" class="app2-preview blocklink">
<span>SECOND<br /> APP</span>
</a>
<div class="app-preview">App2 preview</div>
</li>
</ul>
</div>
Edit: After I got some caffeine, I noticed the problems with the setup. I've created a demo at JSFiddle. The markup will display a "header" for an app which will display the child description when clicked on, and hide the descriptions of other sibling's descriptions.
In this case, you can show the current element, and hide the siblings, which would be a cleaner solution as it scales as you at more app elements.
$(".app").click(function() {
var $self = $(this);
var $apps = $self.closest(".apps");
var $selfSiblings = $apps.children(".app").not($self);
$self.addClass(".active");
$self.find(".app-preview").addClass("active");
$selfSiblings.removeClass(".active");
$selfSiblings.find(".app-preview").removeClass("active").fadeOut("slow", function() {
$self.find(".app-preview").fadeIn("slow");
});
});
I would also recommend rewriting your HTML as such:
<div class="app-container">
<ul class="apps">
<li class="app">
App 1<br />
<a title href="#" class="app-preview blocklink">
<span>PREVIEW 1</span>
</a>
</li>
<li class="app">
App 2<br />
<a title href="#" class="app-preview blocklink">
<span>PREVIEW 2</span>
</a>
</li>
<li class="app">
App 3<br />
<a title href="#" class="app-preview blocklink">
<span>PREVIEW 3</span>
</a>
</li>
</div>
Write a function to make the functions for you:
function makeHandler(deactivate, fadeOut, fadeIn) {
return function() {
//remove last active classes
$(deactivate).removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$(fadeOut).fadeOut("slow", function () {
$(fadeIn).fadeIn("slow");
});
});
Then:
$('a.app1-preview').click(makeHandler('.app2, .app2-preview', '.app-preview-2', '.app-preview-1'));
$('a.app2-preview').click(makeHandler('.app1, .app1-preview', '.app-preview-1', '.app-preview-2'));
You could probably simplify things further by re-thinking the naming conventions you've got.
I would suggest to define a single function:
function single(index_main, index_aux) {
// Does all your magic
}
$('a.app1-preview').click(function() {
single("1", "2");
});
$('a.app2-preview').click(function() {
single("2", "1");
});
And that does the trick.
I made a jsfiddle example for you. Have a look at it here, it uses as much code that you wrote as possible, so nothing that should surprise you will be there :)
http://jsfiddle.net/2ZPxx/
Basically I ended up with this HTML:
<div class="app-container">
<ul class="apps">
<li class="app1">
<a title href="#" class="app1-preview blocklink" id="app1">
<span>ANOTHER<br /> APP</span>
</a>
</li>
<li class="app2">
<a title href="#" class="app2-preview blocklink" id="app2">
<span>SECOND<br /> APP</span>
</a>
</li>
</div>
<div class="app-preview-app1 app-preview">App1 preview</div>
<div class="app-preview-app2 app-preview">App2 preview</div>
And this javascript:
$('.apps li a').click(function() {
var id = $(this).attr('id');
$('.apps li').removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$('.app-preview').fadeOut("slow", function () {
$('.app-preview-'+id).fadeIn("slow");
});
});