I have this link:
<a id="about-me" class="popup">Info About Me</a>
When clicked is using this jq code to open the info about me in a modal window:
$(document).ready(function(){
$('#all').delegate('a.popup', 'click', function(){
var page = $(this).attr('id');
$('#gr-out').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()}).show();
$('#popup').css({'display': 'block'});
$('#popup').load("../jsfiles/loop.php?page="+ page);
})
$('body').delegate('.hide-it', 'click', function(){
$('.hide-it').hide();
$('#popup').empty();
})
});
(The above works great) Now if I wasn't using modal window and was opening the information in a normal window I would be able to copy my url, send it to a friend and he could access the information with no problem.
Now that I am using a modal window (and the above code) I do not have a url to copy and send.
Is there a way that I can have the url using modal window or the only way is to open the information in a normal window?
If I use this line of code in the above jq can I make it show the page name that is clicked instead of testpage?
window.history.pushState('','','/testpage');
So you want to change the current URI to another one? Did I get that right?
Mozilla: The pushState method
html5demos.com Example
Related
I found the asnwer to my question in another thread: How to load PHP file into DIV by jQuery?
the only problem i have is: i cant send someone a link with a certain file loaded into the did. its always just the home url. is there any way to include that into the url?
i used the following code:
$(document).ready(function(){
$("#artists").click(function(){
$("#content").load('urltocontent.php');
});
});
in my index.php i have a #content and everything works smoothly.
i plan on opening every content in php in that div. but when i open the page, of course the div is empty, because no link was clicked that opens content in the div. is there a way to generate an url that opens the content? so i could spread links
Assuming you are calling your page like this : http://example.com?url=page_to_include.com
You can use this code :
$(document).ready(function(){
$("#contents").load('<?php echo $_GET['url']; ?>');
});
You can use the # .. thats how its usually done in javascript. so by adding #artists behind the url.. Example:
$(function(){
$("#button1").click(function(){
$("#content").html("content of button 1. can load with ajax like you did");
});
$("#button2").click(function(){
$("#content").html("content of button 2. can load with ajax like you did");
});
$(document.URL.substr(document.URL.indexOf('#')) ).click();
})
Now go to yoururl.php#button1
My question may sound confusing but actually it's not. Let me clear you the things. The scenario is I've following HTML code:
/*This is the hyperlink I've given for example here. Many such hyperlinks may present on a webpage representing different question ids' */
<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21679" title="Fixed" href="#fixedPopContent" class="fixed" data-q_id="21679" id="fix_21679">Fixed</a>
/*Following is the HTML code for jQuery Colorbox pop-up. This code has kept hidden initially.*/
<div class="hidden">
<div id="fixedPopContent" class="c-popup">
<h2 class="c-popup-header">Question Issue Fix</h2>
<div class="c-content">
<h3>Is question reported issue fixed?</h3>
Yes
No
</div>
</div>
</div>
Now upon clicking on this hyperlink I'm showing a pop-up(I've used jQUery Colorbox pop-up here. It's ok even if you are not familiar with this library.) On this pop-up there are two buttons Yes and No. Actually these are not buttons, these are hyperlinks but showing as a buttons using CSS. Now my issue is when user clicks on hyperlink 'Yes' the page is redirecting to the href attribute value and the page reloads.
Actually I want to get to the page mentioned in href attribute but the page should not get reload or refresh. How to achieve this? Following is the jQuery code for colorbox pop-up as well as for Yes and No buttons present on this pop-up. I've tried this much but it didn't work for me. The page is getting redirected and reloaded.
My code is as follows:
$(document).ready(function() {
$(".fixed").click(function(e) {
var action_url1 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$('#fixedPop_url').attr('href', action_url1);
$(".fixed").colorbox({inline:true, width:666});
$("#fixedPop_url").click(function(event) {
event.preventDefault();
$("#fix_"+qid).hide();
$("#notfix_"+qid).show();
});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});
});
So you need to load the page at the url but not navigate to it.
You can use .load() .
So in your case, lets say that your pop container div class is .popup, and the div where you want to load the urls content has an id say #container.
$(".popup a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('delhref');
$("#container").load(url);
});
Few things to keep in mind,
This will mostly not work for urls pointing to any other domain. (Same Origin Policy)
Any content loaded with this function (.load()) shall be inserted within the container and all the incomming scripts if any shall be executed.
You can do that with history.js. Here is an example;
HTML:
Delete
Update
<div id="content"></div>
JS:
var History = window.History;
if (!History.enabled) {
return false;
}
History.Adapter.bind(window, 'statechange', function() {
var State = History.getState();
$('#content').load(State.url);
});
$('body').on('click', 'a', function(e) {
var urlPath = $(this).attr('href');
var Title = $(this).text();
History.pushState(null, Title, urlPath);
return false;
});
You can see code here: jsfiddle code
You can see demo here: jsfiddle demo
Note: Urls in example cannot be found. You need to update it according to your needs. This simply, loads content in href without refreshing your page.
While it does seem this would have been asked a million times no matter of search phrasing seems to locate the exact issue. So, another question for the "pros". Opening a dialog is relatively easy, yes. I created a sample page to test the code and make sure it works, and it does. Then I added an alert() to the click event and whoa! its not recognizing the click but it will on the sample page. the click event...
$( "a#newDialog" ).click(function() {
$( "#dialog" ).dialog('open');
alert('Button Clicked');
return false;
});
The difference between the sample page and the actual page is the link itself
<a name="node02" id="newDialog" href="#">OpenDialog</a>
What I've narrowed down is how the link arrives on the page. In the sample page it is static. In the real page it is included through an ajax call fetching a json file that has the markup for the link. So it has to be something to do with being unable to access the dialog functions. Is this correct? and how could I go about making this work? While we are at it I need to know how to get the name="node2" from the link and include it into the dialog for an ajax call.
Basically your problem is that when you assign your click handler, the link doesn't exist so it doesn't "bind" to that link and is effectively useless. You need to use jquery 'on': https://api.jquery.com/on/
Let's assume your link is contained in a parent element #parentContainerId that exists in the DOM when you assign your click handler. In this case, you can use delegated events as described in the link above.
$( "#parentContainerId" ).on('click', 'a#newDialog', function() {
$( "#dialog" ).dialog('open');
alert('Button Clicked');
return false;
});
I am trying to make a script which detects clicks on google ads. All events works like onmouseover, out etc except click, focus, mousedown. When i click on google ads it open its ads link but dont run my jquery script on click event. I have tried preventdefault and other functions like that too.
I want to detect click on google ads and parse the iframe width and height to php file when clicked.
$(window).load(function(){
$('iframe').bind('mouseover', function(){
var iframeID = $(this).attr('id');
$(this).contents().find('html').unbind();
$(this).contents().find('html').bind('click', function(){
alert(iframeID);
});
});
});
This is the code run on mouseover but not on click event.
You need to bind the click events on the contents of the iframe untill the contents are loaded completely inside the iframe. Try wrapping the code inside the load event.
$('iframe').load(function() {
var iframeID = $(this).attr('id');
$(this).contents().find('html').unbind();
$(this).contents().find('html').bind('click', function(){
alert(iframeID);
});
});
Capturing the click event of an iFrame is not possible when the content is from another domain.
What you can do is detect the mouse-enter and leave on iframe.
Here is example
<div class="item">
<iframe src="http://www.google.com" width="612" height="344" frameborder="0"></iframe>
</div>
<script type="text/javascript">
$("div.item iframe")
.mouseover(function(){
alert("mouse over");
})
.mouseout(function(){
alert("mouse out");
});
</script>
How to open javascript or jquery popup to display target url in same page
either using jquery or javascript
can anyone please provide me with a link i have searched on google but was unable to found a valuable thing
Here's some markup..
Some Site Link
<div id="popup"> This is the popup text pre $.load() </div>
Here's some code...
$('#popup').dialog({
autoOpen: false,
modal: true
});
$('a').on('click', function(e){
e.preventDefault();
$('#popup').load($(this).prop('href'), function(){
$('#popup').dialog('open');
});
});
Just use following things
<script>
$("#target").load("your link");
</script>
lets say you already make the popup appear on click of a link or a button so call a function on onClick event and pass the target url as a parameter. the in that function you can use alert like
alert(url);
and then use
window.location = url;
to redirect the page.
I have implemented highslide js and it is working fine...
Thanks fellows