I try to load a sticky navigation bar header on various static html pages.
I use this jquery script to do so:
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
and this to load it where I want
<header id="header" class="header-transparent header-transparent-light-bottom-border header-transparent-light-bottom-border-1 header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
</header>
Everything works fine except for the sticky part of the navigation bar. For a reason unknown to me it decides to act as a non-sticky navigation bar and scroll with the content of the page.
Please make sure your CSS is loading properly & is not overridden. Check browser console to see Javascript errors & also check the style you added is being implemented or not.
Another workaround, Please try adding inline-style:
<div class="header" style="position: fixed; top: 0;" >
<h2>My Header</h2>
</div>
Related
I have JavaScript files named: nav.js, content.js, and footer.js
My HTML page is structured like so:
<body>
<div id='nav'></div>
<div id='content'></div>
<div id='footer'></div>
<script src='nav.js'>
<script src='content.js'>
<script src='footer.js'>
</body>
I then use JavaScript to dynamically load the navigation bar to the nav div, same with the content and so on.
However, when the page loads, it loads the navigation bar, the footer, and then the content. Is there any way to address this problem?
I am building a website in which a div needs to slide in from the left to the right when it is scrolled into view. I am using the AOS library to animate it, but it is not working unless I scroll the element into view, and then refresh the tab.
Here's my HTML's head:
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
And my body content:
<div class="aos-item top" data-aos="slide-right">
<h3><em>Header Here</em></h3>
<p>
<big>
Content Here.
</big>
</p>
</div>
<script>
AOS.init();
</script>
Is there something wrong with my code? Or is it the library? If it is the library, are there any good alternatives?
I am loading a large image for the background of my website, so instead of having it messy I decided to add a nice little preloader with CSS and Jquery.
Right inside the <body> tag I have:
<!-- CSS Spinner -->
<div class="spinner-wrapper">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
<em class="spinner-text">One moment</em>
</div>
</div>
Then, before the closing </body> tag I have this script:
<!-- Spinner -->
<script>
$(document).ready(function() {
$(window).load(function() {
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
});
</script>
When I open the index.html file directly, it works perfectly, but when I was trying to load it on my website (link) it just shows the preloader forever.
Interestingly, I've found that if I open the network panel in the developer console, most of the time the preloader works as it is supposed to.
Does anyone know what the heck is going on here?
Try to import your jQuery inside the head tag.
Adding this attribute (data-cfasync="false") within JS will not work to exclude the script from Rocket Loader. Rocket Loader ignore individual scripts by adding the data-cfasync="false" attribute to the relevant script tag, for example:
<script data-cfasync="false" src="/javascript.js"></script>
I am using jQuery in order to create a custom popUp similar to a tutorial/tip for the end user (who can be on Chrome OR any other browser). However as you can see in the below image, the divs that contain my code have a large top which pushes my code down. While using Chrome's developer tools, I notice it would take -591px to have the popup where I want so I used the below code:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" />
<script>
function myFunction() {
$(function () {
$("#something").dialog();
});
$("#something").dialog({
top:-591
});
}
</script>
<div id="something" style="resize:both; display:none; background-color:yellow; height: 200px; width:200px;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed.</p>
</div>
I tried several answers from this link but they didn't work. Also, I noticed when I comment out the first script line (jquery-2.1.11.min.js) it stops working, so it might have to do with that jQuery version?
Here is the screenshot from Chrome's Dev Tools:
The problem is that you have added js again instead of adding CSS
Change it to jquery-ui.css
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
DEMO
I am using JQuery Mobile to develop my mobile website. Currently, I have to set the 'data-theme' property several times throughout my HTML document to be able to incorporate a particular theme. Is it possible to set the 'data-theme' property once, maybe in a javascript function, or something to that effect? The solution would need the theme to style all my elements. I attempted to solve the issue using CSS style-sheets, but it failed to work as a solution.
My Webpage's HTML:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.mobile-1.0/demos/jquery.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="CodeGeneral.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.css">
<link rel="stylesheet" href="StyleMaincss.css">
<title>Home</title>
</head>
<body onload="GenerateData();" data-role = "page" >
<div data-role="header" class="HeaderBar">
<img src="Logos v2/Header.png" alt="" class="HeaderImage">
</div>
//Content on page
<div data-role="footer" class="NavBar" data-position="fixed">
<div data-role="navbar">
//Navigation button creation
</div>
</div>
</body>
My javascript:
$(document).delegate("[data-role='page']", 'pagebeforecreate',
function () {
$(this).attr('data-theme', 'a')
}
);
function GenerateData() {
//Things carried out during loading
}
This is from the jQuery Mobile Docs:
The data-theme attribute can be applied to the header and footer
containers to apply any of the lettered theme color swatches. While
the data-theme attribute could be added to the content container, we
recommend adding it instead to div or container that has been assigned
the data-role="page" attribute to ensure that the background color is
applied to the full page. When this is done, all widgets on the page
will also inherit the theme specified in the page container. However,
headers and footers will default to theme "a". If you want to have a
page with, for example, only theme "b" for all its elements, including
its header and footer, you will need to specify data-theme="b" to the
page div as well as the header and footer divs.
Source: http://jquerymobile.com/demos/1.0/docs/pages/pages-themes.html
So basically if you add data-theme="a" to the data-role="page" tags then everything should inherit the a theme. You can test that by messing with the "theme swatch change" links at the top of the link above.
UPDATE
To programmatically change the theme of a page add this code to your site:
$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
$(this).removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e').addClass('ui-body-a').attr('data-theme', 'a');
});
But this creates overhead for the user's browser while rendering the website so I suggest altering the hard-coded data-theme attributes on the data-role="page" tags.
UPDATE
You can also do this inside the mobileinit event handler by changing the page prototype:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind('mobileinit', function () {
$.mobile.page.prototype.options.theme = "a";
});
</script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
This will make any page without a set data-theme attribute default to the a theme.
Here is a demo: http://jsfiddle.net/tEbD5/3/