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.
Related
This question already has answers here:
Use jQuery to hide a DIV when the user clicks outside of it
(40 answers)
Closed 5 years ago.
I have my dropdown, it is working on click of its parent anchor tag, but now i want to close it on body click
I have try to do it with event.stopPropagation();
but it didn't work, here is my code -
$(".mydropd > a").click(function() {
$(this).siblings(".mycustom_dropd").slideToggle();
});
$('body').click(function(event) {
$(".mycustom_dropd").slideUp();
event.preventDefault();
event.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="mydropd">
<a href="#" class="mydropd_a">menu
<span class="line1"></span>
<span class="line2"></span>
<span class="line3"></span>
</a>
<ul class="mycustom_dropd">
<li>
<img src="images/vibgyor.png"> VIBGYOR
</li>
<li>MULTIPLAYER</li>
<li>RAPTOP</li>
<li>HELP</li>
<li>PROFILE</li>
</ul>
Wrap code in jQuery ready function.
<script type="text/javascript">
$(function() {
$(".mydropd > a").click(function(){
$(this).siblings(".mycustom_dropd").slideToggle();
event.preventDefault();
event.stopPropagation();
});
$('body').click(function(event){
$(".mycustom_dropd").slideUp();
});
});
</script>
<div class="mydropd">
<a href="#" class="mydropd_a">Click Here
<span class="line1"></span>
<span class="line2"></span>
<span class="line3"></span>
</a>
<ul class="mycustom_dropd">
<li><img src="images/vibgyor.png"> VIBGYOR</li>
<li>MULTIPLAYER</li>
<li>RAPTOP</li>
<li>HELP</li>
<li>PROFILE</li>
</ul>
</div>
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>
I would like to Highlight the Menus Dynamically by using Php & javascript. Below code working for only Menu's. But I want when I click Submenu for that menu it should be Highlighted.Please check the Code once
<html>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
});
</script>
<style>
.active{
background: #4FA9E4; color:#FFF;
}
<ul id="id">
<body>
<div id="cssmenu">
<ul>
<li class="has-sub">Company
<ul><li class="has-parent">a</li>
<li>b</li>
</ul>
</li>
<li class="has-sub">Patners
<ul><li>c</li>
<li>d</li></ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
Please Help me. Thanks in advance.
$('.has-parent').click(function() {
$(this).closest('.has-sub').addClass('active');
});
If I understood right, that's what you are looking.
BTW, you have some syntax problems.
You didn't close the <style>.
The <ul id="id"> is outside the <body>, isn't closed and apparently does nothing.
You are missing the <head>.
Final code:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cssmenu a').each(function(index) {
if(this.href.trim() == window.location)
{
//check if 1st level, then below condition
//if(this.class() != "has-parent")
//{
// $(this).addClass("active");
//}
//if not first level, assign active to parent of this
//if(this.class()= "has-parent")
//{
$(this).addClass("active");
//}
}
});
$('.has-parent').click(function() {
$(this).closest('.has-sub').addClass('active');
});
});
</script>
<style>
.active {
background: #4FA9E4;
color:#FFF;
}
</style>
</head>
<body>
<div id="cssmenu">
<ul>
<li class="has-sub">
Company
<ul>
<li class="has-parent">a</li>
<li class="has-parent">b</li>
</ul>
</li>
<li class="has-sub">
Patners
<ul>
<li class="has-parent">c</li>
<li class="has-parent">d</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</body>
</html>
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 had an html navigation code as below
function Data(string) {
//1. get some data from server according to month year etc.,
//2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
$('.filter').removeClass('active');
$(this).addClass('active');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
When the user clicks on any of the tabs
all the remaining tabs should be unactive,
and the current element/tab should be active,
My code above is not working.
How to make the above code work?
I only want to use javascript onclick for this. Is there any way that the this(current) object is send when the user clicks on the tab?
Use this html to get the clicked element:
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
Script:
function Data(string, el)
{
$('.filter').removeClass('active');
$(el).parent().addClass('active');
}
Try like
<script>
function Data(string)
{
$('.filter').removeClass('active');
$(this).parent('.filter').addClass('active') ;
}
</script>
For the class selector you need to use . before the classname.And you need to add the class for the parent. Bec you are clicking on anchor tag not the filter.
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
<script>
function Data(element)
{
element.removeClass('active');
element.addClass('active') ;
}
</script>
You have two issues in your code.. First you need reference to capture the element on click. Try adding another parameter to your function to reference this. Also active class is for li element initially while you are tryin to add it to "a" element in the function.
try this..
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
<script>
function Data(string,element)
{
//1. get some data from server according to month year etc.,
//2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
$('.filter').removeClass('active');
$(element).parent().addClass('active') ;
}
</script>
You can use addEventListener to pass this to a JavaScript function.
HTML
<button id="button">Year</button>
JavaScript
(function () {
var btn = document.getElementById('button');
btn.addEventListener('click', function () {
Date('#year');
}, false);
})();
function Data(string)
{
$('.filter').removeClass('active');
$(this).parent().addClass('active') ;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" >
function openOnImageClick(event)
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var target = event.target || event.srcElement; // IE
console.log(target);
console.log(target.src);
var img = document.createElement('img');
img.setAttribute('src', target.src);
img.setAttribute('width', '200');
img.setAttribute('height', '150');
document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images" >
</div>
<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
<img src="sabaLogo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
</body>
</html>