So on my website I have a snowfall effect going on as it is the month of December and I wanted to celebrate, the only problem is, it blocks all of my links and stuff like that... How would I go about making the canvas not overlay my website but still work and show like on top? (You'll understand this if you visit the website.)
Website URL: http://insanewolfhd.byethost17.com/
Script URL: http://insanewolfhd.byethost17.com/Snowfall.js
Where I Got The Script: http:// thecodeplayer.com/walkthrough/html5-canvas-snow-effect (I'm not allowed to post more than 2 links, sorry :/)
Thank you anyone who can help, I feel like it's just a little CSS thing or something and I'm thinking wayyy too much about this :).
Use the z-index css tag. Go into the css class of the snow file, and set it's Z to -1. This is very useful in your situation.
.class{
width: ?px;
height: ?px;
z-index: -1;
Hope this helps!
Related
i implemented a site (through small JS code) in my original website.
Everything works fine but yesterday i found out that when i first load the page, there is no scroll bar. If i refresh the page, its possible. I played a bit with the parameter 'height' but it didnt work.
Body-Code: <heyflow flow-id="erp-berater-anzeige" height="2000" width="100%" pass-parameters scroll-up-on-navigation></heyflow>
The page: https://entiac.com/erp-stellenanzeige/
PS: Im not deep into coding
I'd advise you to, first of all, add a css file or <style> tag in your index file, which will contain
body{
overflow: visible; !important
}
so you will be sure that isn't an issue. The site has some sort of scrollbar issue even on PC browser, so it would be better to set height:100%- hardcoded values like body height 2000px aren't a good solution.
Other good thing which you could do is divide your site in <section> your code </section>, give them height: 100vh; and make sure your js file loads in one of these sections. This way every section will be full height of your display (100vh = 100 view height). Such a split will make your site bit easier to manage.
Cheers!
I'm kinda new at creating a website using scripts, css ant etc. but I think that I'm doing well already... Now I came to the place where I need to make my site looking good in different screen resolution (monitor). So now I have something like this: (deleted link due of reputation lack) boxes are my site's content and I want this to look like that one: http://ipix.lt/di/BH2C/stretched.png content is stretched to the end of browser size and monitor size... What should I do to make my content a little bit bigger, or lower for lower screen monitors? I have already done width to 100%, but don't know what to do more, maybe where's some javascripts? Thanks! And sorry for my English, wanted to make it more clearer...
EDIT. Okay, so there's my site http://pingvinasus.tumblr.com/, yeah it's a blog which I edit in html... Now I managed to make my every content in percents, would be 20%, sooo it will stretch. But I can't do that because I have extra spaces after every of my post, tried to edit css, but can't find that correct margin, tried changing everything there, but it looks like it's not event css... So any ideas?
I think Media queries is what you are looking for.
Here is a simple example
Check this jsfiddle
#media (min-width: 700px) {
.color{
background-color: red;
}
}
From your pictures, it looks like you have margins and paddings set. set them to 0px!important and like Slico says, ensure your media queries are intact.
I'm having trouble getting the Facebook Comments Plugin responsive. Apparently they constantly change the way of rendering the frame and thus is very difficult to find a solution on the web.
Apparently the newest form was implemented in March 2014.
The old way was by CSS but it does not solve the problem nowadays. Apparently a javascript to rewrite the code that will call the frame code is required. This code should also make the adaptation of "data-width" every change browser size.
Someone already implemented this solution? Does anyone know another way to solve?
Thank you very much.
It looks like you can now specify 100% width in the facebook comments box like so, but it only works for page load. At least it's better than before.
<div class="fb-comments"
data-href="http://example.com/"
data-width="100%"
data-numposts="5"
data-colorscheme="light">
</div>
I still had to add the following CSS if you want to change the width as the window change, and there's not guarantee that it won't change in the future. Hopefully the above code will eventually be fully responsive.
.fb-comments span,
.fb-comments iframe {
width: 100% ! important;
}
I'm not pretty good in java. Still I guess that question is not too easy for pros as well.
As the header says I'm trying to find a solution how to change a background image gradually by scroll with jQuery.
The background should be responsive.
I found a website having a similar thing sojournnetwork.com
Since I'm no pro with java and jquery a jsfiddle example would be nice!
Thanks in advance
I think this is a perfect tutorial for your needs.
http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
This is the result of the tutorial:
http://ianlunn.co.uk/plugins/jquery-parallax/
The background image dont change, just is Fixed.
div.background {
background-image:url(xxx);
background-attachment: fixed;
}
And every "new" image is a container div who scroll like another.
Something like this must work.
I believe this effect is typically called "Parallax". You might find some of the following examples helpful:
http://wagerfield.github.io/parallax/
http://stolksdorf.github.io/Parallaxjs/
You can also search google for the word "Parallax" and find some simple scripts that don't require an external library if that is a requirement. I did find this JSFiddle which might be helpful as well. I believe it uses the following to setup the backgrounds:
background: url(http://www.webdesignermagazine.nl/files/2012/06/golf.jpg) 50% 0 no-repeat fixed;
I'm developing a product to be used by a number of customers alongside our Web application.
Quick background:
These customers have incorporated into their pages a widget that we've developed.
The widget's content can be modified by using our application.
The idea behind this product is a bookmarklet that we supply, which will "highlight" our widget on their page, turning it into a clickable link that leads to an administration panel in our app.
The "highlight" effect actually involves some z-index tricks; we create a semi-transparent "backdrop" <div> just a few ticks below the maximum-supported z-index to gray out the page; then, we adjust the z-index of our widget to sit on top of that translucent backdrop. The visual effect should look about like this:
http://skitch.com/troywarr/dtexp/example-good
However, in Safari, as well as Firefox under certain conditions, there seem to be some sort of rendering artifacts that prevent this from looking as intended:
http://skitch.com/troywarr/dteqx/example-bad
As you can tell from the screenshot, a couple of elements (our logo image and the <iframe> that holds an advertisement) are still "bright," as intended. But, the rest of the widget is still shaded-out.
I've been poking around with Firebug for quite a while to try to get at the source of the problem, but I haven't had any revelations. I'm hoping that someone has experienced a similar issue, or recognizes the "visual signature" of this kind of problem. Or, if you're simply adept at JavaScript/jQuery and/or Firebug, I could really use your help trying to figure out where this approach is falling short.
I created a test bookmarklet as a live example. To see it, please:
Open Firefox (the version under development currently only works there reliably).
Go to this page and drag the link there to your Bookmarks Bar: Example Bookmarklet
Navigate to: http://www.sfgate.com/cgi-bin/article.cgi?f=/n/a/2010/07/30/sports/s170637D86.DTL
Click the bookmarklet while on that page, and you should see what I'm referring to.
Thanks very much in advance for any help! This has me baffled.
I was about to give up on this, but I think I found the problem. You have a hell of a lot of DOM elements going on here, but luckily that isn't the issue causing this problem.
The iframe inside DIV#onespot_nextclick needs a background color of #FFF.
Simple!