I am trying to get a spreadshirt shop integrated on my website but when I add their recommended javascript code it moves my header on the page down. It only happens on that page. My website is https://www.irelandsfuture.com/store and the script looks like this:
<div id="myshop">Spreadshop loading...</div>
<script>
var spread_shop_config = {
prefix: 'https://shop.spreadshirt.ie',
shopName: 'irelandsfuture',
baseId: 'myshop',
};
</script>
<script type="text/javascript" src="https://shop.spreadshirt.net/js/shopclient.nocache.js"></script>
Any ideas how to prevent this please?
Thanks
I just opened the dev tools you have an SVG at the top of your page.
add display: none like this :
<svg xmlns="http://www.w3.org/2000/svg" style=" display: none;">
instead of :
<svg xmlns="http://www.w3.org/2000/svg" display="none">
Related
I have embeded the following code onto my sharepoint online site. The image appears in the bottom right hand corner and once clicked it takes me to the top of the page, as coded; however the Jquery javascript code doesn't appear to work... The image just stays visible regardless of how many pixels are scrolled.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"><\script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop()>100) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
</script>
<div id="toTop">
<a style="position: fixed; bottom:20px;left:5px;" href="#ctl00_onetidHeadbnnr2" title="Back to Top"><img style="border: none; height: 37.5px; width:50.5px" src="backtotop-1.png" ></a>
</div>
The above code encompasses both suggested solutions and still doesn't appear to work! The image is visible regardless of how much the page is scrolled, yet once clicked the image disappears. The code appears to work completely fine in a plain .html file.
Please help! Thank you very much in advance.
Current Console Error:
Check the jsfiddle link of your code. It works perfectly well. You just need to check the below line if the jquery 1.6.4.min.js:
<script type="text/javascript" src="http://code.jquery.com/jquery 1.6.4.min.js"></script>
This should be the right one: http://code.jquery.com/jquery-3.3.1.js
yeah, its your jquery source. have u seen a "space" in jquery src line, also you forget to close the tag. and for future dont forget to check the browser console for errors.
you can use the following fixed code in your source file.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop()>100) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
</script>
<style>
body{
border: 1px dotted red;
min-height: 1000px;
}
</style>
<div id="toTop">
<a style="position: fixed; bottom:20px;left:5px;" href="#ctl00_onetidHeadbnnr2" title="Back to Top">
<img style="border:1px solid red; height: 37px; width:50px" src="https://i.imgur.com/WkCCy7L.jpg" >
</a>
</div>
let me know if this fixes your error now.
I am attempting to run some very simple Skrollr animations in an IFrame. When I populate the IFrame with the simple HTML Skrollr outputs the error to the console (in FireFox):
'Not well formed'
I have confirmed that the IFrame contents are correct and run just fine if they are not in an iframe and in a standard webpage. And I've confirmed that the Skrollr javascript file/s are loading successfully. All CSS, JS and images are all on the same domain as the parent webpage so there's no cross-domain occurring. The problem exhibits itself when the content is placed in an IFrame. Which makes me think this is a Cross-Scripting issue or that Skrollr is coded to detect cross-domain/cross-scripting?
Any idea's whats going wrong and how I can overcome this? I can provide a simple example if you wish. Hoping to grab Prinzhorn's attention, yes I know Skrollr's not currently maintained and that IFrame's are not officially supported but if I have an idea of whats going wrong or what the problem is I can fork Skrollr and add this functionality.
Edit: Heres a simple JSFiddle example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tasks</title>
<style>
#main-container {
width : 1200px;
height : 1000px;
background-color : #eee;
}
iframe {
width: 100%;
height: 100%;
overflow: scroll;
}
</style>
</head>
<body>
<div class="container text-center">
<button id="load-btn">Load Iframe</button>
<br/>
<div id="main-container" class="text-center">
<iframe id="mf-preview" frameborder="0"></iframe>
</div>
</div>
<!-- Javascript files -->
<script src="js/custom.js"></script>
</body>
</html>
everything is working brother
when the size of your iframe is more then 1000px then it will show the scroll bar
Like example :
<iframe id="mf-preview" src="http://onhax.net" frameborder="0"></iframe>
I have add the source of iframe which is larger then 1200px
and after add this like it will show the scroll bar
check it in JSFiddle
I'm using http://notifyjs.com and I think it's working great.
However I have this issue when applying it to my case.
I want to display a notification using notify.js in the bottom right corner. And this notification should not disappear until users click on it (just to make sure they don't miss it)
When I run my web locally, everything is working fine. The notification is displayed in bottom right corner of the window, and it stays there regardless of scrolling.
$.notify('HelloWorld',
{
className: 'success',
autoHide: false,
clickToHide: true,
position: "bottom right"
}
);
However, when I deploy it to the UAT server in which our web application is only an iframe, the notification is displayed in the corner, but it's in the corner of the iframe, so it might go off the users' screen when they scroll, or they can't see it because it appears when they are not the bottom of iframe.
Please help to advise how I can position an iframe's div relatively to the window is possible. Thanks very much in advance.
==================================================
The html looks something like this:
<html>
<head>...</head>
<body>
<div id="container">
...
<div id="main-content">
<div id="iframe-container">
<iframe id="Main" name="Main" frameborder="0" scrolling="no">
<html>
<body>
...
<div class="notifyis-corner" style="right: 0px; bottom: 0px;">...</div>
</body>
</html>
</iframe>
</div>
</div>
</div>
</body>
</html>
I can see the css for notifyjs-corner as below:
.notifyjs-corner {
position: fixed;
margin: 5px;
z-index: 1050;
}
How come this code works smoothly in chrome and not in firefox?
I use SnapSVG.
JS:
var pinguin = Snap("#pinguin");
Snap.load("pinguin.svg", bodyload ) ;
function bodyload( data ){
pinguin.append( data );
};
Html:
<svg id="pinguin" ></svg>
<script src="snap.svg.js"></script>
<script src="main.js"></script>
What I get on Chrome:
What I get on Firefox:
I tried to make a fiddle, but the fiddle doesn't work.
Instead, the code and display can be get here: http://www.pinguin.moe/
Do you know how can I fix the display on Firefox?
I think you need to add a width and height to your outer SVG. There is one in the svg file, but not in the markup on the main page. If you set this to 800,600 for example, it should work.
<svg id="pinguin" preserveaspectratio="xMinYMin meet" viewbox="0 0 300 750" width="800" height="600">
PROBLEM:
I'm using Snap.svg to create some basic interactive graphics, but for some reason I can't get my external SVG file to load using Snap.load(). I've pulled code straight from the tutorial at snap.io and checked and double-checked the docs. My SVG file renders in the browser fine, it just doesn't display inside the Snap SVG. Other shapes (i.e. not pulled in using Snap.load() ) do display.
CODE:
I've boiled my example down to the most simple HTML and SVG files imaginable, and the Snap.load() method still isn't working for me. Does anyone see what I'm missing?
HTML:
<head>
<style media="screen">
#svg {
width: 300px;
height: 300px;
}
</style>
<script src="snap.svg-min.js"></script>
<meta charset=utf-8 />
</head>
<body>
<svg id="svg"></svg>
<script type="text/javascript">
var s = Snap("#svg");
Snap.load("svgtest.svg");
</script>
</body>
SVG (originally exported from Illustrator):
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<rect x="14" y="33" fill="#2BB673" width="70" height="30"/>
</svg>
UPDATE:
Updated the code as per #Ian's suggestion -
var s = Snap("#svg");
Snap.load("http://www.w3.org/TR/SVG/images/struct/Use01.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}
- but still no display of external SVG. I tried using an SVG from w3.org just to be sure it wan't a problem with the file itself or my domain.
The load function takes a callback, as loading can take some time. So I think you would do something like the following...
var s = Snap("#svg");
Snap.load("svgtest.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}
Edit: There may be some access control issues if not accessing from the same server as the script, check the console log for any errors.
I was having exactly this problem in Internet Explorer only, and it turned out to be because the SVG file I was loading in was a minified one from which the doctype had been removed. Other browsers were ok without the doctype, but leaving the doctype in fixed the problem in IE as well:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
In case, like me, you're using Grunt to minify SVGs, you can leave the doctype in by adding the following option to your Gruntfile:
svgmin: {
options: {
plugins: [
{ removeDoctype: false }
]
}
// etc...
}
There is a small bug in the distribution - see https://github.com/adobe-webplatform/Snap.svg/issues/196. The suggested fix works correctly. The online demo works because it is referencing a much older build of the library.
With version 0.5.1 installed. The code in the correct answer above needs to be re-written as follows to work:
var s = Snap();
Snap.load("svgtest.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}