jQuery: Strange results using the 'not' selector? - javascript

I have a page where when you click a tab with text, you are linked to a different page with an expanded description contained within a white block. On this page, I want the user to be able to return to the previous page by clicking anywhere in the background (not on the white block). Right now, clicking anywhere on the page with the expanded description links back to the main page (when it should be ignoring clicks on the white div containing the description). Here's my javascript:
$('html:not(.detailwhite)').mousedown(function(e) {
document.location.href="index.html";
e.stopPropagation();
});
And here's my html:
<!DOCTYPE html>
<html>
<head>
<title>Group details</title>
<!--library files-->
<script src="lib/jquery_min.js"></script>
<!--stylesheets-->
<link rel="stylesheet" type="text/css" href="style/detailstyle.css">
<!--javascript-->
<script type="text/javascript" src="js/interactive.js"></script>
</head>
<body class="detailbg">
<div class="detailwhite">
<h1 class="name">Group Name</h1>
<img class="pic" src="style/testPic300x200.png" alt="Group picture"/>
<p class="description">Here's the detailed description of the group.<p>
</div>
</body>
</html>
Summary: Clicking anything BUT the 'detailwhite' div should link the user back to index.html. Unfortunately, the 'but' is ignored.
Thanks for reading.

Your selector is adding the handler to a html element which does not have the class detailwhite, Instead you need
jQuery(function ($) {
$(document).mousedown(function (e) {
document.location.href = "index.html";
e.stopPropagation();
});
$('.detailwhite').mousedown(function (e) {
e.stopPropagation();
});
})
Demo: Fiddle

Related

How to open a link in loaded page

I have 2 pages. I loaded my second page inside my first page.
In the second page i have a link.
The problem is, when I click on the link in the second page, it opens in new tab.
How do I open this link in same page, like an iframe?
Here is my snippet:
$( document ).ready(function() {
$('#second').load('second.html');
});
#second{width:100%; height:300px; border:1px solid blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<title>First page</title>
</head>
<body>
<div id="second"></div>
<!--
THis is my second page code ////////
<html>
<head>second page</head>
<body>
click here !
</body>
</html>
-->
</body>
</html>
Name your iframe <iframe name="namedIf"></iframe>
and then in your anchor tag use target attribute <a href="link" target="namedIf"/>
But as the comments says, google doesn't allow you to iframe their content in your site.
UPDATE
As you're not using iframes, the only thing i can think of is to "intercept" any clicks to the anchor tags present on your loaded document and use the same function again to load it.
$(function() {
$('#second').load('second.html', function(){
$("#second a").click(function (e) {
e.preventDefault();
$("#second").load($(this).attr("href"));
});
});
});
So the code gets executed when your code has completed loading second.html into your document.

All of the elements change on Click, not just the targeted one

I am just playing with some basic Jquery and something strange is happening. I have two elements on the page.. an h1 heading, and a generic link. When I click the link I would like the text to change to "This text has now changed", and it does, but then either the button disappears and a new h1 is created with the same "this text has not changed" text, or the button itself turns into the h1. I'm not sure, but here's my code:
HTML:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<h1>This element should change.<h1>
Click Me<br>
</body>
</html>
JQUERY:
$(document).ready(function() {
$(".myLink").click(function() { // this is a convenience method that targets the same elements above just in a quicker fashion.
$("h1").html("This text has now changed.");
});
});
Picture Before the click:
Picture After:
Also, when I added the fade out method everything disappears once again, not just the targeted "h1" element.
Any advice is greatly appreciated as always. Thank you.
You have two opening <h1> tags (the second one is missing a /.)
<h1>This element should change.<h1>
^here
It looks like you have two start tags. EG:
<h1>Heading 1<h1>
Try changing the second tag to an end tag. EG:
<h1>Heading 1</h1>
^
Your h1 tag is not closed. You have 2 opening tags, and by default, your link is contained by the second opening tag so it's changing that html

On click link popup javascript

I want a pop up on a link on my website.
I want the pop having following code
<script data-cfasync=false src="//s.ato.mx/p.js#id=8135&type=popup&size=800x600&hourscap=1"></script>
and my link for example
`Click Me`
I want when someone click on the click me link the pop up appears. also kindly tell me how can i add pop up on the scroll bar.
I am in learning stage. kindly guide me
save the following code as .html or .php file without making any changes
<!DOCTYPE html>
<html>
<head>
<title>POPUP Demo</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function(){
$("#btn").click(function(e){
e.preventDefault();
var newWindow = window.open("", "newWindow", "width=700");
newWindow.document.write("<p>content of popup window</p><code>echo '<b>echo php</b>';</code>");
});
});
</script>
</head>
<body>
Click me
</body>
</html>

jQuery Load() not loading within div

I am trying to use jQuery to open an href inside a div, rather than simply linking to the new page. I have viewed a number of tutorials but the load() function does not seem to be working for me.
Please take a look at my code and let me know what piece of puzzle is missing.
Here is my HTML page:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Jquery</title>
</head>
<body>
<!-- nav links to open in div#content area -->
<a class="menu_top" href="pages/home.php">Home</a> | <a class="menu_top" href="pages/about.php">About</a> | <a class="menu_top" href="pages/contact.php">Contact</a>
<!-- div for links to open in -->
<div id="content-area"></div>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</body>
And my jQuery Javascript:
$('.menu_top').click(function() {
var href=$(this).attr('href');
alert (href);
$('#content_area').load(href);
//return false;
});
I added alert to make sure the URL was being retrieved, and it is, then it would completely load then new page. So I added "return false" and it did nothing after the alert suggesting that the load() was not working.
Initially was running this through WAMP so I tried running the page directly from the folder and the browser tried to download the linked pages instead of opening them. I also tried uploading to a remote web site and got the same result as on WAMP.
Try:
$('.menu_top').click(function() {
var href=$(this).attr('href');
alert (href);
$('#content-area').load(href);
//return false;
});
Because your div is called #content-area, not #content_area.

JQuery Coin slider not showing images

I've been trying to use coin slider to add it to my web page but I've not been able to see any of the images that I've been trying to add, the problem is that it only shows the description messages, the images appear blank... I would really appreciate your help on this, thank you
This is the code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Altius Coaching</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="css/coin-slider.min.js"></script>
<link rel="stylesheet" href="css/coin-slider-styles.css" type="text/css" />
</head>
<body>
<div id="coin-slider">
<a>
<img src='ALTIUS COACHING.jpg' >
<span>
Description for img01
</span>
</a>
<a>
<img src='ALTIUS MEDICAL.jpg' >
<span>
Description for imgN
</span>
</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 560, height:300, navigation: true, delay: 5000 });
});
</script>
</body>
</html>
does "ALTIUS COACHING.jpg" exist on the server? Is it the correct cAsE depending on the server? If all else fails, try removing the space from your html and the filename (or changing it to %20) and try again. According to your source, "ALTIUS COACHING.jpg" exists in the same folder as the html file we're viewing, is this correct?
Can you show us the broken page "live" somewhere?

Categories

Resources