In the dashboard from my project, the follow code handle all clicks in hyperlinks:
$('document').ready(function(){
$('#box').draggable();
$('#box').hide();
$('#button').click(function(){
$('#box').hide();
$('a').unbind();
});
$('a').click(function(e){
if($(this).attr('href') != 'logout.html') {
e.preventDefault();
$.get($(this).attr('href'), function(data){
var $temp = $('<div/>', {html:data});
$('#title').text($temp.find('title').text());
$('#text').html($temp.remove('head').html());
$('#box').show();
});
}
});
});
The content of the pages is opened in this <div>:
<div id="box">
<div id="header"> <span id="title"></span> <span id="button">X</span> </div>
<div id="text"> </div>
</div>
My problem is: after I "close" the <div> by clicking in 'button', I can't access the other options anymore, because all of them stay blocked. When I refresh the page all back to work.
Someone knows how to solve this?
Ok, after more tryouts I managed to find the problem: happens that the pages I open in the <div> have some included scripts on them. When I remove this scripts, the behaviour in the parent window back to normal. Probably some type of conflict between the two scripts are happening.
Related
I have an index.php with a #container div that has content, and an #open button.
on the page are also 2 tabs.
...
<div id="Tabs">
<div id="content1Tab"></div>
<div id="content2Tab"></div>
</div>
<div id="container">
<div id="content1">
..someContent...
<button id="open1">Open</button>
</div>
<div id="content2">
..someContent...
<button id="open2">Open</button>
</div>
</div>
clicking on content1Tab brings content1 to the forefront of container, using z-index.
clicking on content2Tab brings content2 to the front.
$(document).ready(function(){
$("#content1Tab, #content2Tab).click(function(event) {
var myString = $(this).attr('id');
var parts = myString.split("Tab");
var thePart = parts[0];
$("#content1, #content2).css('z-index', 7);
$("#"+thePart).css('z-index',9);
});
...
clicking on open1 successfully loads container with the contents of containerOther div from page.php.
$('#open1').click(function(){
$("#container").load("../page.php #containerOther> *");
});
I want a click on the tab to reload the original contents of the container. How can I do this?
I tried:
$("#content1Tab, #content2Tab).click(function(event) {
$("#container").load("../index.php #container > *");
....
});
but then the container stays on content1 no matter what tab I click on, and the open1 doesn't do anything. debugging showed that clicking doesn't enter the js code. I tried:
$("#container").load("../index.php #"+thePart);
the content changes according to the tab click, but the button still doesn't work.
both index and page have a link to the js file.
If I follow it correctly, it is chancing content of the #container where first the button was bound to jQuery functionality.
This way the binds will get lost and as result nothing happens when you click on those buttons again.
Solution is to bind again after the content has been refreshed, with a callback function I think:
$('#container').load("../index.php #"+thePart, function() {
$('#open1').click(function(){
$("#container").load("../page.php #containerOther> *");
});
});
I think a separate function for binding after the content refresh is better, because if you use the code here above, the binding problem will happens after the first successful content refreshment :).
I have a reporting function answerCardInnerLinkReportingCall which gets invoked on click on <a> tag inside a specific div. I use event.preventDefault(); to override the default click behavior.
Currently I am redirecting the user to the target url in the reporting function after sending all the reporting parameters using window.open('http://stackoverflow.com/', '_blank'); method.
jQuery(document).on('click','#answerCard a', function(event) {
event.preventDefault();
answerCardInnerLinkReportingCall(this);
});
If I use onclick function in the tag I would have returned true and it would make href work without me redirecting the user manually but is it possible to do the same in click handler? I can't use onclick since I dont have control over the html data.
I wanted to check if there is a better way of implementing this?
Edit1: Adding sample HTML
<div class="answer" style="display: block;">
<div class="well">
<div id="answerCard" answercardid="check_phone_acard">
<h3 id="answerTitle">check your phone</h3>
<div><ol class="answerSteps"><li>Go to <a title="Link opens in a new window" href="https://test.com" target="_blank">Check phone</a>. If prompted, log in.</li></ol></div>
<label id="seeMoreAnswer">Displaying 1 of 1 steps. </label></div>
<!-- Utility Section -->
<div class="util">
<span class="pull-left"><a id="viewFull" href="/test.jsp?sid=52345">View full article ?</a></span>
<span class="pull-right">
</div>
</div>
</div>
</div>
I guess you dont need to use any 'event.preventDefault();' if you want to use links native functionality after the script executed.
try like this
jQuery(document).on('click','#answerCard a', function(event) {
//event.preventDefault();
alert('script running');
answerCardInnerLinkReportingCall(this);
});
also created JS Fiddle. check it out.
You can use javascript's:
window.location.href = 'http://url.here.com';
To tell the browser to navigate to a page. Hope it helps.
Other way can be of returning true or false from answerCardInnerLinkReportingCall and depending on that call or dont call event.PreventDefault();
Try something like this:
$('#answerCard a').click(function(event) {
var loc = $(this).attr('href');
event.preventDefault();
answerCardInnerLinkReportingCall(loc, this);
});
function answerCardInnerLinkReportingCall(loc, that){
// your code to do stuff here
window.open(loc, '_blank');
}
See this demo fiddle
I will post below html and javascript to make things clear... But before I do that, I will explain a bit what I am trying to accomplish.
Basically I want to make some pages to open without page reload. That was successfully done. Now, I cannot find any solution on how to make that page which is clicked, to remain opened on page load/reload.
<nav>
Home
Download
About
Contact
</nav>
<div id="container">
<div id="home">
Home
</div>
<div id="download">
Download
</div>
<div id="about">
About
</div>
<div id="contact">
Contact
</div>
</div>
$(function(){
var $menuItems = $('nav a'),
$container = $("#container");
$menuItems.on('click', function(e) {
e.preventDefault();
$(this.hash, $container).delay(300).fadeIn(1000).siblings().fadeOut(1000);
});
});
Thanks to Marcus Ekwall for help on the javascript!
Now... I am really wondering how can I use these href's to load clicked menu page when page is reloaded and also how to load home page on first visit. Cause what I get is blank page (no content) until I click on one of menu items.
Cheers.
If localStorage is ok for you?
$(function() {
var $menuItems = $('nav a'),
$container = $("#container");
$menuItems.on('click', function(e) {
e.preventDefault();
$(this.hash, $container).delay(300).fadeIn(1000).siblings().fadeOut(1000);
localStorage.setItem('currentpage', this.hash);
});
if (localStorage.getItem('currentpage')) {
$(localStorage.getItem('currentpage'), $container).siblings().hide();
}
});
UPDATE
Added a demo.
I want to use fancybox to popup a message if a certain button is clicked.
I want the fancybox message to only contain some text,
and a 'close' button, i dont mind using the default button if there is one.
can someone give an example of how it should be written in the html page and the js page?
any help will be much appreciated!
Assuming your button has an id of yourButton:
$("#yourButton").click(function () {
var content = $("<div>Hello<br /><br /></div>");
var button = $("<input type='button' value='Close Me!' />");
content.append(button);
$.fancybox({ content: content });
$(button).click(function () { $.fancybox.close(); });
});
This should be able to help you:
http://fancybox.net/howto
Once you have required all the relevant files, to hook it up to all linka, use this:
$("a").fancybox();
If the html is complicated enough you might prefer putting it in a hidden div as I've done below. This is a scaled down version of code I'm running on my site to do a fancybox dialog box. Works with FancyBox version 1.3.4 (I haven't upgrade to 2 yet). Personally, I like the default close button (circle X in top right corner) and even pressing Escape works, but I've added a custom close button to the popup. It includes javascript to close FancyBox.
<a id="mylink" href="#mypopup">link style button</a>
<div id="mybutton">button</div>
<div style="display:none">
<div id="mypopup">
<h1>My Title</h1>
<p>My Message</p>
<!--... other complex html can go here ...-->
<input type="button" onclick="$.fancybox.close();" value="Custom Close Button" />
</div>
</div>
<script type="text/javascript">
$('#mylink').fancybox();
$('#mybutton').click(function() {
$.fancybox({
'orig' : $(this),
'href' : '#mypopup'
})
});
</script>
my site has 2 pages both have hyperlinks to each other but when user click on that hyperlink I just need a certain div of that page to be replaced by certain div on other page, please guide me how to program it.
structure
page1.html
<div id="no_replace">
page 2
<div id="replace">
//page one stuff
</div>
</div>
page2.html
<div id="no_replace">
page 1
<div id="replace">
//page two stuff
</div>
</div>
so on page one when usr clicks on link "page two" ... I want the 'replace' div of page one to be replaced by 'replace' div of page2.html and there should be fade in and fadeout
Use the load() method.
$('a').click(function(){
$('div').load($(this).attr('href'));
});
Try this in Page1.html
$(function(){
$("a").click(function(){
$.get({url:"page2.html",
success: function(data){
$("#replace").html($("#replace", $(data)).html());
}
});
});
});
first give your link an id or class. I'm going to call it .loadpage
$('a.loadpage').click(function(e){
e.preventDefault();
var div = $('#replace');
div.fadeOut(300).load($(this).attr('href'), function(){ div.fadeIn(300); });
});
First you need to stop the default behavior of the link by doing e.preventDefault(). Then you need to use the load() method to bring in the contents of the page you're trying to load.