I have pages with articles. When someone clicks on them from an outside source how can I make that article pop up in fancybox and have the index page as the parent page.
I have my pages set up in this format: pages.php?id=123
I want to open that link from my index.php with the fancybox already open to that link.
You can check the referrer on pages.php to see if it's from an outside source, and then redirect to the index page with something in the parameter (e.g. ?external=true;articleid=123) identifying that a Fancybox should pop up with the appropriate article.
For example, on pages.php:
$(function(){
if (document.referrer.indexOf(<your url>) < 0){
window.location = "index.php?external=true;article=123";
}
});
And then on index.php:
$(function(){
//Insert code here to parse query string. You can find code for this online.
var isExternal = getValueOfExternal();
var articleId = getValueOfArticleId();
if (isExternal){
//open fancybox
$.fancybox({
'href': 'pages.php?id=' + articleId
});
}
});
Related
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.
I builded for my home page (index.php) a navigation bar, where I can click on one of the available links (anchors). Selecting one link a new body is loaded inside my page (index.php) that contains this code:
<script type="text/javascript">
$(document).ready(function(){
$('#myselector a').click(function(e) {
var url = $(this).attr('href');
$('#body').load(url);
e.preventDefault();
});
});
this works good.
But, now after loading new page page1.php inside the body of index.php I have this trouble:
My page1.php contains a form, and after the submission I need to reload the index.php with page2.php inside. How can I perfrom this?
Note: I edit my question: If you think that now it is clear can you upvote plese? (I was banned for this question and I can't post other question)
In order to catch events from nodes inserted at a later point you need to use event-delegation, for example like this:
$("body").on("click", "a", function(e){
var url = $(this).attr('href');
e.preventDefault();
$('#body').load(url);
});
This way every click on a link, which is a childnode of body will cause the eventhandler to fire. If you do not want to target all links, but just specific ones you can do that by adding a class to them and the selector.
I have a page where entries are read from a table and then php generates the divs where each row is displayed - the div's name & id are set to a unique string based on the record #. For example:
When the page is loaded, it is passed the unique anchor string of the record to scroll to in the format:
href='showpost.php#g50'
When the page loads it correctly shows the url with the anchor but it doesn't scroll.
However, if I put my cursor on the browser's address bar and press <Enter> the page scrolls correctly to the record. Oddly enough, <F5> and <Ctrl-R> will not work (Firefox 16).
I am guessing that the page being dynamically created has something to do with it. Any ideas what might be going on?
You can always just use a simple javascript call to scroll to an anchor. You can call Javascript code from anywhere in the page, so to be safe, you could put it at the end of the page after the PHP has generated all the anchors.
<?php
// php generation code here
?>
<script type="text/javascript">
var hashSplit = location.href.split('#');
var curHash= hashSplit[1];
window.location.hash = curHash;
</script>
Or if you already know what the anchor of the page is going to be via php you can do it even easier.
<?php
$anchor = "home";
?>
<script type="text/javascript">
window.location.hash = "<?= $anchor; ?>";
</script>
Very useful example, thanks SISYN.
But I have my version
let hashSplit = location.href.split('#');
let curHash = hashSplit[1];
if(typeof curHash !== 'undefined') {
$('html, body').animate({
scrollTop: $('#' + curHash).offset().top
}, 1000);
}
Here an example of my code, which when user click a link then it will load a specific content id and will show default content if there have no click action into #content div
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
$("a.view").live('click', function (e) {
var id = $(this).data("id");
$('#content').load("content.php?" + id);
e.preventDefault();
});
$('#content').load("content.php");
});
Question, how to load a content automatically when user using direct link or type in url bar : example http://domain.com/content.php?id=5
So if user type or using direct link I want script doing exactly like .live('click') and load the current id example is 5
Let me know.
Using your example, you'll need an anchor to bind to:
Some Link
Then the code should work as follows:
$(function(){
// bind to current and future anchors with the "view" class applied
$('a.view').live('click',function(){
// grab the content and load it in to the container
$('#container').load('content.php?id=' + $(this).data('id'));
// return false so it doesn't follow the link
return false;
});
// also load the default content (before any click event)
$('#container').load('defaultContent.php');
});
However, if you're looking for a seamless (and SEO acceptable) content page, I would look in to using the hashbang syntax: What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?
I have a simple jQuery click and scrollTO anchor script. I have another page, in which I link the content as index.php#home, index.php#about and so on...
How can I achieve the scrollTo effect from the external page? I'm thinking of linking the section as index.php?page=home and when the page loads, take the home variable and apply the animation.
Any other ideas?
EDIT, my code is below
$("nav a").click(function(event){
//prevent the default action for the click event
//event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 500);
});
I think index.php?page=home is an easy way to go.
While index.php is being generated in php test for the variable being set using
if ( !empty($_REQUEST['page']) )
Make sure to filter all user input before you use it
$sanitizedPage = htmlentities($_REQUEST['page']);
Output javascript onto your page that calls the appropriate scrollto action when the page loads
<script type="text/javascript">
window.onload = functionThatScrolls('<?php echo $sanitizedPage; ?>');
</script>
Here I assumed you have a javascript function that takes the anchor name as an argument to cause the scrollTo effect. If you are using jquery or another framework of course use their onload event handlers.