When i open my website https://tobia-web.wz.cz/me?lang=en , for a second it looks like half the CSS disappeared. Why is this happening? Is it just loading in, or any actual problem with CSS/JS?
add "defer" keywords to <script> tag. example:
<script src="./js/main.js" defer></script>
Related
I'm using one of html5up.net's templates and when I add a stripe 'Pay by card' button, it's overridden by the css of html5up (see both jsfiddles below). I tried going through the css file and see if there's anything I could change to affect the button's appearance to no avail (the file is absolutely massive and I could use some steering from more experienced heads).
Jsfiddle of how the button is supposed to look like (no css loaded)
<title>Lalala</title>
<body>
<form action="/your-server-side-code" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="a public key"
data-amount="1000"
data-name="Lalala"
data-description="Widget"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-zip-code="true"
data-currency="eur">
</script>
</form>
</body>
Jsfiddle of how it looks like with HTML5up's css, which is the same code as before plus this line:
<link rel="stylesheet" href="main.css" />
My question: Is there any simple way that I can have just the button be exempt from the css that I have loaded for the site? If not, how would you go about accomplishing that? A new class that has default settings in the css file?
Thanks!
Line 1897 of your CSS is describing styles applied to the buttons.
If you remove line 1923:
height: 3.75em;
It will look kind of ok (or just delete whole section from 1897 to 2050 and you will be fine).
I am using animate.css for my Web site and i used a bootstrap carousel slider it is searched on google and placed in my website. Its working fine But after that my animate.css is not working properly means all animated elements in the HTML page are animating when page loading.
ex: i am using fadeInRight animated class below the page but it is not working when i am going to page down and when i refresh the page at that particular element its working fine. please solve this
please check the site
If you want to Reveal Animations When You Scroll, this is what you're looking for:
http://mynameismatthieu.com/WOW/
CSS animations cannot be delayed based on the scroll position. So, first, you'll need to download and include the wow.min.js file to your page like this:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
And then add the animation to your html element by adding the class 'wow' followed by the animation name in animate.css:
<section class="wow slideInLeft">
</section>
For more advanced options related to timing the delay etc, refer: http://mynameismatthieu.com/WOW/docs.html
You can use wow.js for animating elements when it's on viewport area.
HTML:
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>
CSS:
<link rel="stylesheet" href="css/animate.css">
js:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
check the jquery plugin wow.js
I've made a website using WordPress. The problem is the blank slide after the last image. I've checked in Firefox firebug there is not any blank slide or script in code but it is shown in the original site.
Any known solution then help me out.
I just noticed you have this line
<script type="text/javascript" src=".../wp-content/themes/twentyten/js/startstop-slider.js"></script>
and then you have the same code again inside that page
<div id="detail_slider">
<script language="javascript">
...
...
</script>
Try removing that external startstop-slider.js file from the page. Maybe they are interfering with each other.
I'm extremely confused and I've been trying to do this for a while. This is just for a simple tumblr theme. I'm trying to make it so viewers can click a link and when it's clicked, the background image of the page switches.
This is the page, eiramanaik.tumblr.com
The background image is shown, and when clicked, I want it to change to this: http://i50.tinypic.com/23lz49h.jpg
I've looked through everything, and even if I understood the coding, I didn't understand how to apply it, as I am very new to html in general.
Please help!
if you want to use jquery is: (first you have to put id into your link as id="link")
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#link').click(function(){
$('#id_background').attr('src','23lz49h.jpg');
});
});
</script>
i am using a slider js named as easySlider1.js for worspress. its working fine but till the time whole page is not fully loaded it show all the images of slider for a moment till the page is not loaded. as soon as page is fully loaded then it working fine.but it seems odd that it show all the images while page is in loading process. so please tell me how can i solve the problem. i want that all the images of slider should not show while page load. i try for it but cannot get the solution.so please tell me how can i solve the problem.
Thanks.
I don't know how the page looks like, but with the information you gave I came up with the following:
If the images are surrounded with a html-tag like div or p, then you can add css to hide the images while loading and show the images when the page is fully loaded.
If you have this:
<html>
<body>
<div id="image_gallery">
<img src="..." />
</div>
...
</body>
Then change it to this:
<html>
<body>
<div id="image_gallery" style="display:none;">
<img src="..." />
</div>
...
<!-- insert script just above the body endtag -->
<script type='text/javascript'>
jQuery('div#image_gallery').show();
</script>
</body>
jQuery must be loaded for this to work.