JS to bring HTML element into view - javascript

I am using the following code without a problem to scroll to an HTML element.
<?php
if ($_SESSION['id']=="bed5") {
?>
<script>
document.getElementById('bed5').scrollIntoView(true);
</script>
<?php
}
?>
However I want to destroy the SESSION['id'] after the JS has scrolled to the HTML just ONCE in order to prevent the page repeatedly navigating to the scroll view. So at the end of my script after the JS above I have added.
<?php
unset($_SESSION['id']);
?>
However the addition of the UNSET function after the JS above is causing the JS to fail. Ie it does not scroll to view the HTML element...even just the once....as I had expected. In summary I just need to get the JS to render a single scroll event .... conditional on the session variable...ONCE.
Anyone know what I am doing wrong here and how to solve the problem please?

Related

How to remove a captcha?

I have add CaptchMe on my website.
Screenshot.
The problem is that there can be only 1 CaptchMe on the same page. The sidebar is include on each page.
The solution in the remove the captcha in the sidebar when the sidebar is closed, and the capcha on the page is displayed. If the sidebar is open with a click, the captcha on the page need to be removed and the capcha on the sidebar displayed.
How can I do it ?
To display the captcha, I use
<?php echo captchme_generate_html($publicKey, $error, $ssl, $customAttributes); ?>
If I add it in a div, I can remove the content with
document.getElementById("captcha").innerHTML = "";
But after, when the sidebar is closed, I can't display it again because the div is empty. And I can't do
document.getElementById("captcha").innerHTML = "<?php echo captchme_generate_html($publicKey, $error, $ssl, $customAttributes); ?> ";
Because this is impossible.
Thank you for the help.
To regenerate the captacha you should be able to put the captcha PHP into it's own file on the server.
Then use JQuery .load() on the php file to make an AJAX call and load the response HTML directly into the DOM.
http://api.jquery.com/load/
I have found a very easy solution after 5 hours ...
I add the login form with an iframe in the sidebar and the other captcha (left) in directly on the page.
The main page is a page and the iframe an other page.
And I can add 2 CaptchMe on the same page :)
Thank you for the help, I learn one more element in jquery :)

Ajax only loading first record?

This function works on loading an external page inside of a div that passes a $_POST variable and click works on the first record on loading the same external page with $_POST variable from query.
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
What is not functioning is this seems to only be passing the first record variable and no others. I can click on the first record and the external page with data loads. I click on other records and the div does not load with new data from click. I have a page that creates a customer list from a mysql query, inside the record loop is a hidden input field with the primary key. Any thoughts on what I am missing? I thought maybe to unbind click, but that did not work either.
HTML Code
<div id="record"><?php do { ?><input type="hidden" name="ContactID" id="ContactID" value="<?php echo $row_tm_reserves['ContactID']; ?>"><!-- Other strings --><?php } while ($row_tm_reserves = mysql_fetch_assoc($tm_reserves)); ?></div>
Help! and Thanks in advance!
The problem is that #form content gets replaced on every load.
My solution:
You can create a new element inside #form, for example a <p>, and append to it, i.e. :
$(document).ready(function(){
$("#form").load("tm-reserves-form.php");
$(document).on("click","#record",function(){
var ContactID = document.getElementById('ContactID').value;
$("#form").append($(document.createElement("p")).load("tm-reserves-form.php", {"ContactID": ContactID}));
});
});
This is the problem with event delegation, change
$("#record").click(function(){
});
to
$(document).on("click","#record",function(){
});
Mainly make sure you have only one id as record in your page.
You should post your html code, to help us help you...
if new dom elements are added, the script that attaches actions on them will not work, because they didnt exist at the load of that script.. switch to :
$(document).on("action","element",function()

Page is Jumping back to Top after targeting the anchor tag

Hello guys im using wordpress and i need to jump to the comments when the user is clicking a link.
The single.php is opening in a new tab and its loading the page on the anchor (comment-id) but after that its always jumping back to the top of the page.
I Know its a problem with javascript (as its working well when i disable js) but im not sure where to find the peace off javascript i have to stop or to change on single.php.
Has anyone an idea how and where to change the javascript. So that i can stay at the comment after clicking the link on a different page?
this is the target <a name="comment'.$comment_ID.'" href="#comment'.$comment_ID.'" onclick="deletco('.$comment_ID.')">DELETE</a>
and this is the link form the other page to the target on single.php
'.$titlecomm.'
thanks for any help
First I encourage you to comment out your JS files one by one it test it out tell you find the responsible js file.
Another approach is, if its javascript issue, then you can do this with jQuery:
$('a.aCommentLinkCssClass').click(function () {
var url = $(this).attr('href').text();
window.location.href = url;
});
and add css class to your link:
'.$titlecomm.'
or if you want just JavaScript only:
<script>
function goToFunction(url) {
window.location.href = url;
}
</script>
and in your html:
<?php echo ''.$titlecomm.''; ?>
try:
onclick="deletco('.$comment_ID.'); return false;"
Or inside the function itself add a return false; at the end. You need to prevent bubbling of the event.

.js file executes every time I click a link

I've been googling the whole day for this... I'm still a beginner at html/css/php/javascript, so I probably have some rookie mistakes, but that's why you guys are here to help me!
So, I have a dynamic website with a static template and dynamically loaded content. For example, when I click the "About Us" link, the template remains the same, but the content gets loaded from another .php file and printed out in a iframe in that same index, using the $_GET method. I'm using iframe so I don't affect the template layout. My problem is that my .js file with animations gets executed each time I click any of the navigation links, so it makes my wish to, for example, fade in the whole website once it's loaded impossible. Each time I click a link the entire website would dissapear and fade in again. I don't know did I use Google wrong, but I cannot find the solution to my problem. I only want that script to run once when the page is loaded, not whenever I click a link! Here are some parts of the code:
Part of index.php:
<?php
include('setup/setup.php');
?>
<html>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="javascript.js"></script>
<body>
<div class="wrapOverall">
<div class="header">Logo, language buttons etc.</div>
<div class="wrapMainNav">Main navigation (Home, About us etc.)</div>
<div class="content">
<iframe src=<?php echo "content_$language/$pg.php"; ?> frameborder="0" style="width:951px; height:486px;">aaa</iframe>
</div>
</div>
</body>
</html>
where "content_$language" is the folder from which I get the file, and "$pg.php" is the file itself.
The setup.php file:
<?php
error_reporting(E_ALL ^ E_NOTICE);
if($_GET['page'] == '')
{
$pg = 'naslovna';
}
else
{
$pg = $_GET['page'];
}
if($_GET['lang'] == '')
{
$language = 'cro';
}
else
{
$language = $_GET['lang'];
}
?>
The javascript.js file:
$(document).ready(function() {
$(".wrapOverall").hide(); //Hide the website
$("html").css("visibility", "visible");
var bg = new Image();
bg.src = "images/background.jpg";
bg.onload = function(){ //Load the background image
$("html").css("background-image", "url(images/background.jpg)");
$("html").css("background-repeat","no-repeat");
$("html").css("background-attachment", "fixed");
$("html").css("background-position", "center");
$(".wrapOverall").fadeIn(1000); //Fade in the site
$(".content").animate({height:'468px'},1000); //Animate content loading
}
});
That's about it, if you guys think you need more code I can send it.
Each time you click a link, and the URL changes, the browser makes a GET request to the server for that page. PHP will return the page and the browser will reload it, even if it's 95% the same as the last page you were on. It'll re-render the DOM and hence the $(document).ready event will fire again.
What you're looking to do is to refresh a part of the page without making a GET request to the server for the whole page. To do this you need to use AJAX.
One of the simplest ways to do this is using jQuery's load() method (click for documentation).
Have a look at the documentation and try a simple example, hopefully that will get you started.
NOTE: as has been mentioned already in the comments, there are plenty of frameworks that try to make achieving this functionality easier. Take a look at backbone.js, angularjs and ember.js to name a few. They also add a lot more, so depending on what you're trying to do, might be overkill, but it's worth a look.
Since your javascript is included in every page, it runs each time the page loads, and therefore hides and then shows the whole page. You should exclude it when loading other pages.
Have you tried to call the the iframe content with ajax ? That way the php will be called in the same time than your js functions.

Linking to a page to also load javascript

I want to be able to create a link to a specific page on my site and then also have that link load a specific piece of javascript on that page.
For example:
I link to this page:
http://www.myexample.com/cat/test.html
Then I want the link to also open a topic on arrival by executing a piece of javascript:
javascript:showContentDesc(59, 11, 'left'), scroll(0,120)
I have done some research and I believe I have to do the following:
1- Modify the URL to specify the DIV to open
2- Have an onLoad handler that parses the URL and opens the appropriate DIV.
So I will then have a URL like this:
http://www.myexample.com/cat/test.html#1
The link will take me toe the page where an onLoad Handler will parse the URL and then call the
javascript:showContentDesc(59, 11, 'left'), scroll(0,120) piece of script.
If the URL were
http://www.myexample.com/cat/test.html#2
it would then be parsed by the online handler and run a different piece of javascript
javascript:showContentDesc(60, 11, 'left'), scroll(0,120)
So my question is, based on this being correct:
1 - What do I need to do to create the onLoad Handler?
2 - How do I make the script that parses the url and then runs the the appropriate piece of javascript?
I hope this is understandable.
Thanks for the help as always!
OK so this is what I have figured out thus far...
In my joomla module (The one I want to be able to load a spesific topic of has this piece of code on the bottom.
<script type="text/javascript">
showContentDesc("<?php echo $module->id; ?>",0,"<?php echo $menuPositions; ?>");
</script>
This tells the browser to load topic 0 - this can be changed to 2 or what ever I want.
So I believe all I have to do now is add a handler that parses the URL somewhere and then have the 0 in the code be the value of the part the handler parses ??
Any help???
This made it work!
<script type="text/javascript">
showContentDesc("<?php echo $module->id; ?>"<?php $page=$_GET['page'];
if(isset($_GET['page']))
echo "$page";
else
echo "0";
?>"<?php echo $menuPositions; ?>");
</script>

Categories