I'm editing the Debut theme on Shopify. I wanted to make the header static so I found this tutorial here: https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/m-p/518018/highlight/true#M132407
Everything is working as intended until after all the content is loaded, at which point it "bounces" in order to position the main content under the header. I tried to find the cause, and I realized that removing the $(window).on("load", headerSize);
from the code below stops it, but does not reposition it.
I have no clue how to use JavaScript and I assume I have to set a shorter animation or some kind of timer on the existing code in order to load the page instantly, or without the user noticing the bounce.
JavaScript:
function headerSize() {
var $headerHeight = $('div#shopify-section-header').outerHeight();
$('#PageContainer').css('padding-top', $headerHeight);
}
$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));
The easiest way to achive what you want is to add the following at the bottom of your css file:
#shopify-section-header {
z-index: 999999;
position:fixed;
}
Related
I tried but couldn't get it done.
I want the background of a div to cover full page according to the device width and it should change each time when page is load or refresh on same system.
I have tried many codes but none of them works for me.
Now the script that i am using is:
<script type="text/javascript">
window.onload=function(){
var thediv=document.getElementById("image");
var imgarray = new Array("../bgimages/1.png", "../bgimages/2.png", "../bgimages/3.png");
var spot =Math.floor(Math.random()* imgarry.length);
thediv.style.background="url("+imgarray[spot]+")";
}
</script>
The HTML code is as follows
<html>
<body>
<div id="image">
<div class = "container">
</div> <!--container ends-->
</div>
I want #image div background to cover full page.
This is the CSS i am using:
#image
{
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
Here is the link of the page: http://sahibfreelancer.hostzi.com/
No background image loading.
Please if i miss anything you can let me know. I hope i gave enough details. I am trying this from last one day.
Will be looking forward to your responses.
I spotted a typo :
var spot =Math.floor(Math.random()* imgarry.length);
... should be ...
var spot =Math.floor(Math.random()* imgarray.length);
... shouldn't it ? Does it work if you edit that ?
Since you have jQuery in the tags, I'm going to assume you're using jQuery.
But that being said you're not using the $ syntax in your code examples.
Here's how you can set the background with jQuery:
$('#image').css('background-image', 'url(' + imageUrl + ')');
Edit:
Looks like Ashugeo got it. Next time check the console for the output of your script, it would have been throwing an exception.
Also, if you are using jQuery, there's nicer ways to do what you're doing.
To make the image occupy the entire screen you can specify the viewport height in css like this #image {height:100vh}
Now for the javascript code everything looks fine to me if the images are in the specified url it should load them randomly. You can see a example here.
the only thing i've done is load the images over the web since i cant access them locally on fiddle. A different Image is loading every time.
As for the page load i've used a immediately invoking function which will fire when the contents are loaded but you can use onload as well.
I think its the path of your images.
I pasteD your code and change the url and it works http://jsbin.com/pozadujeca/edit?js,console,output
Sorry, but I am a complete noob with JS. I am using Bootstrap to try build my first website.
The website has a fixed top navbar. I want to change the navbar's border-bottom properties when it reaches the bottom of the header div (about 480/500px down the page).
Currently the border-bottom is white, but I want to change it to blue when scrolled beyond a certain point (bottom of header) and then change back to white if scrolled back up again. The effect I want is the appearance of the fixed nav 'picking up' the bottom border of the banner section when it scroll's past.
I have given the navbar div an id of id="n1", and created a class .navbar1{border-bottom: 1px solid rgba(46,152,255,1)!Important;} to add to override the existing css.
I am not using jQuery because I don't use much JS and I don't want to call it just for a few things - it is a big file. I have tried various things without any success. Probably because they relied on jQuery? I don't know. For example, the last one was:
$(window).scroll( function(){
if($(window).scrollTop() > 50) $("n1").addClass("navbar1");
else $("n1").removeClass("navbar1");
});
Anyway, I was hoping someone may be able to help me with the plain/pure JS to change the attribute properties as described. Thank you in advance for any assistance.
EDIT:
This has been kindly answered below. But given some comments, I thought it might be useful to clarify my use of JS: My website requires very little JS functionality so I have chosen to inline my JS, rather than call an external JS file or files - such as jquery.js and bootstrap.js which are relatively large files.
Although I lose the benefit of caching the JS, and my HTML is slightly larger, I am happy to do that because in my case I feel those losses are more than made up for the increased initial page load speed from:
not having to make additional http requests,
not having to load relatively large files.
It is certainly not for everyone, but I feel that it suits my case. Having said that, when all is done and my website is up and running I will probably do some testing to see whether a custom external JS file is better again. Basically, I am only using Bootstrap for its CSS functionality, not its JS functionality. I hope that makes sense.
This demo may help you!
It doesn't use jQuery.
Here is the javascript code:
window.onscroll = function() {
var nav = document.getElementById('nav');
if ( window.pageYOffset > 100 ) {
nav.classList.add("navbar1");
} else {
nav.classList.remove("navbar1");
}
}
I did a small change on #radonirina-maminiaina amazing answer.
While it works, I do prefer avoiding doing unnecessary DOM calls during the onScroll event. The onScroll event can be triggered quite often on some devices, so it's best to keep its handler as fast as possible.
In my solution, I cache the nav DOM element on a closure and I only update its classes if the offset changes.
window.onscroll = function () {
let isScrolled = false
const scrollPoint = 100
const nav = document.getElementById('navbar')
function onScroll () {
if ( window.pageYOffset > scrollPoint && !isScrolled ) {
nav.classList.add("scroll");
isScrolled = true
} else if (window.pageYOffset <= scrollPoint && isScrolled) {
nav.classList.remove("scroll");
isScrolled = false
}
}
onScroll() // Makes sure that the class is attached on the first render
return onScroll
}()
Problem
I have made a Bootstrap 3.2.0 site with multiple different pages. Every different page has it's own, whole bodywide backgrond image. I have now gone the simplest route by making different CSS-file bodycssforthispage.css for every page. bodycssforthispage.css only contains the following code, and by then overwrites Bootstraps original body definitions:
html,body {
height:100%;
background-color: #333;
background-image: url(../img/bg-image.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-attachment: fixed;
}
Now what I want to do here, is to preload all other site related CSS-files, so that when I go for example from index.html to page1.html, all the are needed files (CSS-file for background and images) are already preloaded to browsers cache, and the transition to the next page is smooth. It is important to notice, that I want to preload the whole CSS-file(s) and it's contents.
Solution 1: preload all images and use different .css for each page
I could preload all images needed with JavaScript by placing this simple code to the bottom of my index page:
<script type="text/javascript">
if (document.images) {
img1 = new Image();
img1.src = "img/bg1.jpg";
img2 = new Image();
img2.src = "img/bg2.jpg";
}
</script>
</body>
</html>
and then just create bgforthisandthatpage.css for each different page, only containing:
html,body {
height:100%;
background-color: #777;
background-image: url(../img/bg-imageforthispage.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-attachment: fixed;
}
Problems using this way
This would be the simple solution, but it includes many many different .css-files. Preloading 5-10 CSS-files should be done at the bottom of the page so, that the page itself loads smoothly (just like in Bootstrap with many other scripts).
It is come to my knowledge (correct if I'm wrong) that preloading whole CSS-files (i.e via JavaScript) may cause cascade styles to overwrite each other, so that the page would then use the most bottom CSS-file(s) data (bg-image ect. in my case).
In my opinion preloading many different CSS-files just for the changing background image is not quite convenient.
Solution 2: give every html/body element it's own class with different bg-image
Giving each page it's own class like this:
<html class="contactpage-bg-image">
and then create own class for each page into the original css-file like this:
html.contactpage-bg-image {
/* styling */
}
html.indexpage-bg-image {
/* styling */
}
Problems using this way
If images are big-sized and there are a lot of them, it impacts dramatically to the index.html loading time, because it will fist load all images mentioned in .css file (as you know, the code to the .css is located at the top of the page between and tags).
Questions
What is the best way to:
a) Change the background image for different pages using some funky preload function (note that bg-image has to be in the body, because some fadeloader.js stuff in my site), and;
b) Is there any better way to do this then by making thispagesbg-image.css file for every single site and;
c) Feel free to come up with your own ideas to do this!
Solution would prefered to be done compleatly in Javascript, jQuery or some mixature with css (or what ever suits to do this task most efficiently).
After 2 hours of comprehensice Googling, I only came up with nothing. I found this Pre-loading external files (CSS, JavaScript) for other pages, but I think that this loads everything before my page is loaded.
EDIT: Temporarely fix
I have now created class for each page's <html> on mypagesCustomCSS.css (and copying it as much as needed):
html.page1ClassH, html.page1ClassHere body {
background-image:url(../img/bg-for-page1.jpg);
}
html.page2ClassHere, html.page2ClassHere body {
background-image:url(../img/bg-for-page2.jpg);
}
and then I have placed following image preload JavaScript to the bottom of my index.html just before </body> tag:
<script>
$(window).on('load', function() {
if (document.images) {
img1 = new Image();
img1.src = "img/bg-for-page1.jpg";
img2 = new Image();
img2.src = "img/bg-for-page2.jpg";
}
});
</script>
This does the trick for now! As I mentioned earlier, I am using this page through iPhone 4 and slow 3G connection, so the preloading is vital.
I am still experiencing some problems with my site, as it lag's a lot. Perhaps I should resize those super-sized images and try again. Have a try at: http://www.kolumbus.fi/~g636221/jano/index.html
Solution 2 looks good to me as you don't need to create multiple css files + will be cached on the first request. One clarification though, only the images for the css classes used on the page will be downloaded here.
So now, the only task remains is to pre-load resources for other pages user is about to browse. For this you can create a javascript file or jQuery code which downloads resources after the current page has been loaded completely.
jQuery File (Code)
var pages = ["class1", "class2", "class3"]; //Declare all pages here
window.onload = windowloaded();
function windowloaded()
{
for(i=0; i < pages.length; i++)
{
$("div#preloader").append("<div class='" + pages[i] + "'></div>"); //This will load all other resources automatically as css classes are already present on the current page.
}
}
HTML Code (Add to all pages, anywhere on page. This remains invisible and is responsible for pre loading resources for other pages.)
<div id="preloader"></div>
CSS Modification (Single CSS for all pages)
div#preloader { display : none; }
Replace this :
html.contactpage-bg-image {
/* styling */
}
with :
.contactpage-bg-image {
/* styling */
}
removing html will make the class applicable for div which is used for preloading the image.
You could place all your separate CSS backgrounds into a single CSS file that is used across your site.
Give each background a class selector. Something like:
CSS
html.backgroundOne, html.backgroundOne body {
/*styles*/
}
html.backgroundTwo, html.backgroundTwo body {
/*styles*/
}
Then give each page a corresponding class on the opening <html>:
HTML
<html class="backgroundOne">
This way your CSS is already cached ready for use.
I'm having issues with jquery and bxslider on my site, i've been racking my brain over this for a while but can't seem to find any way to make it work how i'd like,
I'm building a slider using bxslider and basically i want the current slide to have a class of 'active' or an opacity of 1, whereas i'd want all other images on the sliders to have an opacity of 0.7.
i have a potential 'infinite' number of slides on my page and this is where i seem to be running into problems. (it's being used in a wordpress loop, and each post is coded to pull the images from the post into the slider)
you can see what i've got so far at: http://jsfiddle.net/bu5cd/
$(document).ready(function(){
$('.bxslider').bxSlider({
onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
$('img.attachment-thumbnail-size').removeClass('active');
$('img.attachment-thumbnail-size').eq(currentSlideHtmlObject+1).addClass('active')
var current = $('img.attachment-thumbnail-size').attr('id');
}
});
});
you can see it works for the first slider somewhat, but it doesn't carry through to the second slider.
Cheers guys, been racking my brain over this for hours! I'm open to using another slider if that would help achieve the desired result, there doesn't seem to be an awful lot of documentation around for bxslider.
Your first issue is that you have your parameters all wrong in your callback function. The first parameter is a jquery object pointing to the current slide. Then, you are selecting the "n-th" img on the whole page instead of in relation to your current slideshow. Using this current slide jquery object, you can find only the appropriate images instead of affecting all sliders. Try this:
$(document).ready(function () {
$('.bxslider').bxSlider({
onSlideBefore: function ($el) {
/* remove the class from all images of this slider only */
$el.closest(".bxslider")
.find('img.attachment-thumbnail-size')
.removeClass('active');
/* add the class to the image within the current slide */
$el.find('img.attachment-thumbnail-size')
.addClass('active');
}
});
});
http://jsfiddle.net/bu5cd/3/
I have a small issue with absolute positioned elements inside of iframe.
So I have a page, on the page I have a iframe with small game. In the game is a guy and the guy has absolute positioned pupils. The pupils are moving by javascript.
Everything works just fine, but if I open that page, and go ahead and browse other pages in different tabs, After I come back the pupils are on other place than before (completely ut form eyes.)
There are more elements positioned absolutely in that iframe and none have the same problem I guess it is because of the Javascript animation. Did someone encouter similar problem? Im sorry but for many reasons I cannot post the page here.
I can post script for pupils animation:
function eyes_sides(){
$('.eyes').animate({
left:parseInt($('.eyes').css('left'))-9
},{duration:1500});
$('.eyes').animate({
left:parseInt($('.eyes').css('left'))
},{duration:1000});
}
function eyes_roll(){
$('.eyes').animate({
left:parseInt($('.eyes').css('left'))-7,
top:parseInt($('.eyes').css('top'))-18
},{duration:1800});
$('.eyes').animate({
left:parseInt($('.eyes').css('left')),
top:parseInt($('.eyes').css('top'))
},{duration:1300});
}
function animate_eyes(){
var animation = random_number(1,2);
//alert(animation);
switch(animation){
case 1:
eyes_roll();
break;
case 2:
eyes_sides();
break;
}
var delay = random_number(4000,12000);
window.animateEyes = setTimeout(function(){animate_eyes()},delay);
}
The script is not perfect, but does what requires.
I was thinking what could cause the problem, and maybe it is somehow connected to that animation runs when the tab is not active? Maybe adding "onBlur" and "onFocus" to stop / start animation would help?
Thanks for advice!
This code is supposed to stop the animation. At least it triggres onblur on your IFRAME. You'll figure out easily, how to start the animation again.
I'm not familiar with jQuery, but you can "translate" the code.
window.onload=function (){
var ifr=document.getElementById('your_iframe');
(function (x){x.onblur=function (){clearTimeout(x.contentWindow.animatedEyes);return;}}(ifr));
return;
}