My portfolio site has links to different pages that load in an IFrame to the right. I want the pages to always load at the top -- therefore added this code in the head tag of the child pages:
<head>
<script type='text/javascript'>
parent.document.body.scrollTop = 0;
</script>
</head>
It works in Safari but not Firefox or Chrome.... What will work in all browsers?
Thanks!
Related
I'm working on a Wordpress site that was built using Visual Composer. I'm trying to embed a Hubspot form, which is something I have done numerous times but never using VC. I figured it would be as simple as adding a "raw html" block in VC and adding the form embed script.
This does indeed load the form, however it is displayed on the bottom left of the screen instead of the right column where it was set. However, if the page is refreshed, it displays as it should, no problems. This makes me think the script is loaded after the rest of the page is loaded.
I have tried creating a shortcode for the script and inserting in the VC section. Does not work.
You can see the issue here:
http://yourveininstitute.com/leg-swelling/
( form loads at the bottom of page and loads correctly on refresh )
The HS embed code looks like this ( portal and id redacted ):
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
css: '',
portalId: '######',
formId: '#################'
});
</script>
I could really use some help on this one. I'm spinning my wheels.
I'm seeing a hubspot form loading correctly in the sidebar, even on the first load. Are you still experiencing the problem? If so, I might try enqueueing the external script call, and only putting the hbspt.forms.create stuff in the VC block.
Try adding this to your functions.php file:
add_action('wp_enqueue_scripts', 'add_hubspot');
function add_hubspot() {
wp_enqueue_script('hubspot', '//js.hsforms.net/forms/v2.js');
}
I want all my webpages to open at a specific scroll point (scrolled to, let's say, 300px).
I don't want this kind of Javascript solution <body onLoad="window.scroll(0, 150)"> because it's really annoying for the users. In effect, it scrolls only when the page is loaded which means sometimes (if the page loads slowly) it might scrolls many seconds after the page is opened, when the user already started reading the content.
I dont want to change my urls, like in this CSS solution mywebsite.com#scrolldiv
Actually the CSS solution mywebsite.com#scrolldiv works like charm, but it changes my urls, which i don't want.
Is there a way to use the Javascript solution and scroll BEFORE the page is loaded and the content is displayed? I don't want the users to see the annoying automatic scrolling.
Is there a way to use the CSS solution without changing the URLS?
this solution works for your requirements,
the user won't have to wait for load, and there is no url change required:
https://stackoverflow.com/a/22764622/2423221
Just put the script at the end of the html file. Then it will be called as soon as the dom is ready.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- other content
(__)
(oo)
/------\/
/ | ||
* /\---/\
~~ ~~
/other content -->
<script type="text/javascript">
window.scrollTo(0,150);
</script>
</body>
</html>
I am trying to add a smart app banner for users viewing through their mobile browser. I've been looking at some examples that use Javascript/CSS to work with other browsers besides Safari.
However, just dealing with Safari and iOS 6, when I add the meta tag for the smart app banner, it is displayed but cut half way off at the top of the page.
Here is a screenshot of what I'm talking about:
http://i6.photobucket.com/albums/y201/WNxFiveStarKiller/ScreenShot2014-02-27at115725AM.png
I've tried adding Javascript which scrolls to the top of the page like this:
<script type="text/javascript">
$(document).ready(function () {
window.scrollTo(0,0);
});
</script>
But that doesn't do the trick, seems like it thinks the top of the page is where it initially loads.
Any ideas how to get around this? Thanks!
This meta tag placed in the head tag of you're HTML page should work:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
I would generally stay away from sliding the page up and down manually because the smart app banner usually slides down the whole page after the page has finished loading.
I'm getting started with using iframes and am getting examples done from here. So far I have been able to load the webpage in an iframe. my sample code is as follows:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com"></iframe>
</body>
</html>
My question is is there a way where I can click on the hyperlinks inside the iframe and that page again loads within the iframe itself without loading as a new page?
I am working on a website that I use different jQuery files for different functions.
Such as light box, scrolling page horizontally. these to functions work perfectly togeter. But I added a new plugin which is parallax image. And in a part of the plugin I have to add the following script in the body or head tag. So as soon as I add that, the parallax image works but the horizontal scroll stops.
here is the scripts:
<script type="text/javascript">
$(window).load(function() {
$.noConflict();
jQuery('#world').fhparallax({
editor:'off',
automatic:0,
mobile_auto_start:"yes",
path:'parallax/js/ZeroClipboard.swf'
})
});
</script>
And these are the files related to horizontal scrolling:
<script type="text/javascript" src="style/js/jquery.js">
</script>
<script type="text/javascript" src="style/js/jquery.scripts.js">
</script>
<script type="text/javascript" src="style/js/jquery.nivo.slider.js">
</script>
As I am using the Nvio slider so I think you know about the top links, but if you require I can give the the actual links of these js files.
Anyway I as I tested, everything is about (function() b/c when I changed it, in the top scripts the slider worked.
So is it possible to have both of these tools at the same page? If so, can you guide me to fix it please?
Thanks