I am trying to figure out why HTML content underneath a WebGL animation cannot be clicked or interact with.
Please see example.
Currently the div containing the animation is set to:
.webgl-glitch {
position: absolute;
z-index: 2;
overflow: hidden;
opacity: 0.5;
}
..otherwise it will not display at all.
I have tried setting a z-index: 1; property on the header/container div, but this does not seem to help.
Here is the HTML section of the header including the animation div:
<!-- Begin Header animation -->
<div class="webgl-glitch"></div>
<!-- End Header animation -->
<header id="principalheader" class="centerContainer aligncenter fullScreen tintBackground stonebackground" style="z-index:1">
<div>
<div class="container">
<!-- Site logo-->
<img alt="KUBO" src="img/logo.png">
<!-- Site Principal slogan-->
<h1>Digital Exploration for the the digital age</h1>
<!-- Site Resume-->
<div class="row">
<div class="hidden-xs col-md-10 col-md-offset-1">
<h2>CRAFT experiences that <strong>defy</strong> expectations<br/>
CREATE from the the twin <strong>virtues</strong> of inspiration and innovation<br/>
BEAUTY in simplicity and complexity <strong>combined</strong> for the best of both worlds</h2>
</div>
<div class="col-md-10 col-md-offset-1">
<a class="fa fa-angle-down" href="#" data-scrollto="#about"></a>
</div>
</div>
</div>
</div>
</header>
Another thing I have noticed is that if I wrap the .web-glitch animation div inside a HTML5 canvas element it also does not display at all? why would this be?
The only property I have on canvas in the the CSS at the moment is width: 100%;
It's not because of the WebGL animation, it's because of the .webgl-glitch <div>. Putting one HTML element on top of another prevents one from clicking whatever is underneath it; it doesn't matter if it's transparent or not.
As for the <canvas>: anything you put inside a <canvas> element is supposed to be a placeholder for browsers that don't support said element; if your browser supports it, whatever is put inside the <canvas> will be simply ignored; so, if you have something like this:
<canvas>
<h1>Sorry, but your browser does not support the canvas element.</h1>
</canvas>
On browsers that do not support canvas, the message "Sorry, but your browser does not support the canvas element." will be displayed to the user; on the other hand, browsers that do support the canvas will simply not display the elements inside the canvas tag, and will allow the canvas to operate normally.
Related
I am using following theme for one of website (click here). This theme come with one background image and i modified this to multiple background images for 'section' tag <section id="intro" class="intro"></section>
This script doesn't wok properly as it show black screen in between image at time.
codepen example
<!-- Section: intro -->
<section id="intro" class="intro">
<div class="slogan">
<h1><span class="text_color">WELCOME TO SQUAD</span> </h1>
</div>
<div class="page-scroll">
<div class="wow shake" data-wow-delay="0.4s">
<a href="#latest-tabs" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</section>
<!-- /Section: intro -->
I am using a trick and showing all these image also in another div with it display property, this way helped to to resolve black screen between image transition as all image are cached if i am not wrong if i dont put these image in a hidden div then each image takes time to download.
<div class="background-images" style="display: none !important;">
<img src="http://bootstraptaste.com/theme/squadfree/img/bg1.jpg" />
<img src="http://feelgrafix.com/data_images/out/12/859698-nature-background.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140402202316338_photo.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140344524813450_photo.jpg" />
<img src="http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg" />
</div>
Overall you will notice that it breaks, for some reason it some works well in other browser other than FF.
i need to fix this or need another script which can show slid show for a container div as shown in this example and works well with fadein fadeout effect
It looks like that images are being downloaded via a GET request each time JS switches them. Try to cache them somehow so you can save some time on a get/redirect requests.
I think the black screen is caused by the image source, if you look the image source when black screen occurs, it doesn't show an image, and if you navigate to that source through the browser, it gives you an redirect to a different page.
This issue is caused due to incorrect image source...
For ex. this URL is not redirecting to any image..
"http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg"
When the user scrolldown with the mousewheel, I'd like the page go down untill exactly the begining of the next element. Like :
<section class="One">
...
</section>
<section class="Two">
...
</section>
<section class="Three">
...
</section>
When you enter the website, you'll be at the start page, when you scrolldown 1x, I'd like the page scroll untill the begining of section 2 and so on...
Imagine the sections like, home / about / contact
I tried this, but in this example, I have to write the exactly name of the elements and I would have to write one of this for each section... Is there a different way to do so ?
window.onload=function myScroll() {
x = document.getElementById("chat");
h = x.clientHeight;
x.scrollTop = h;
}
<div id="chat" style="width: 100%; height: 70px; overflow: scroll;
border: 1px solid grey">
This can be quite complicated due to the fact that this involves scrolling, catching the mouse wheel events, delay in animations, cross browser usage, swipe and touch events. Fortunately, there are plugins available to make your life easier. One of the most popular ones is Full Page.
Some of the features include:
Usage over old browsers with no CSS3 support.
Add a live menu.
Slide throw the page using the keyboard arrows.
Add horizontal sliders.
Mobile and Tablet detection enabling the scrolling on them.
Usage:
Each section will be defined with a div containing the section class.
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>
All you need to do is call the plugin inside a $(document).ready function:
jQuery:
$(document).ready(function() {
$('#fullpage').fullpage();
});
Demo
Hey I'm looking for some help - I'm more of a designer than a coder but I am trying to learn :)
I do have this kinda working but I can't figure out how to get the thumbnail image to resize to the height of the expanded div - as it expands.
I have a container div and inside that div I have multiple "expandable" divs which contain information about different products.
Each of these expandable divs has a title, a thumbnail image and a price of the product (as well as a plus sign image to expand the div itself).
When the div is expanded there is some more information about the product on show.
But when the div is expanded, I would also like the "price" to disappear (as it's now visible in the expanded information) and I would like the image to automatically scale to the height of the expanded div.
So the product information will be on the on the left hand side of the div and the image will be taking up the right half of the div (with the minus button on top of it.
This is my html
<div class="expandingContentContainer">
<div class="expandingContent">
<div id="expandingContentHeader" style="display:inline; float:left">
<h4>Portable navigation system</h4>
</div>
<div id="expandingContentThumb" style="display:inline;">
<img src="images/thumbnails/audio-portable-navigation-thumbs.jpg" />
</div>
<div id="expandingContentPrice" style="display:inline;">
<img src="images/assets/icon_pound.png" />Price: £200
</div>
<div id="expanderSign">
<img src="images/assets/icon_plus.png" />
</div>
<div id="expanderContent" style="display:none">
<p>Bluetooth voice dialling without the hassle of having to train the device. Reads text messages out loud and features a stylish 2,8" colour display. Play back music and phone calls via the OE-audio system.</p>
<p><img src="images/assets/icon_pound.png" />Price: £200</p>
<p><img src="images/assets/icon_tick.png" />Availability: Most models<img src="images/assets/icon_hash.png" />Part Number: 3600-78-474<img src="images/assets/icon_pencil.png" />Legal: N/A</p>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#expanderSign").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").name("−")
}
else {
$("#expanderSign").text("+")
}
});
});
</script>
Sounds like something you could solve entirely with CSS. As long as the container-div has a fixed height, you should be able to set the height of the img-element to height: 100%, causing the image to scale accordingly. However, this will not work while the display-mode of the container is set to display: inline. You will have to use display: inline-block to be able to set the height of the div.
In order to get a good help you should add a link to your website or the css files.
You will need some changes in the css and maybe (depending on the support you need) some javascript (jquery or zepto).
You could also use a pre build library but it's really not necessary.
I have a webpage containing several Divs which contain individual 'pages'. I have defined the following CSS styles:
#charset "utf-8";
/* CSS Document */
.hideDiv{
display:none;
}
.showDiv{
display: inline;
}
Everything worked fine and for a long while we had no problems either viewing our pages in Safari on our Macs or in IE6 (which our client uses).
We then updated Safari from 4.0.5 and we suddenly had page elements initially appearing incorrectly positioned. The first page is OK but when you click 'Next' an image positioned to the right of the layout appears initially offset considerably to the right mostly outside its containing Div clipping most of the image. However as soon as I resize the window the image jumps into it's correct position. If you click from say page 2 to page 3 and then click back again to page 2, so the image has been cached, it displays correctly.
We painfully downgraded Safari on some Macs and soldiered on with others hoping an update would fix it. Curiously everything works well on my new Mac Pro running Safari 6. The pages always display fine in IE6. My MacBook Pro running Safari 5.1.7 always offsets the images.
I don't believe it is a Browser issue but an area of my code which isn't very robust and some Browsers don't interpret the code as we would want it.
I created fresh html files which are identical to the multi-div page but contain only one 'page'. The layout is solid every time I display it in Safari 5.1.7 so I don't think it is my html/CSS which defines the position of the element. Here is a typical Div containing a single 'page':
<!-- Page 1 -->
<div class="showDiv clear" id="page1">
<div id="bgPic-components">
<!-- Sub-Heading -->
<h1>Sub-Heading</span></h1>
<!-- Page Content Area -->
<div class="contentTextArea fullWidth">
<div style="position:absolute; width:280px; z-index:2;">
<p>Some body text here.</p>
</div>
<table style="position:absolute; right:40px; bottom:40px; z-index:0;">
<tr><td>
<img src="../../medialibrary/3DI/3DI0315.02.01.jpg" style="display:block; position:relative; height:440px;"/>
<p class="padCaption">Annotation</p>
</td></tr>
</table>
<table style="position:absolute; bottom:24px; z-index:0;">
<tr><td>
<img src="../../medialibrary/photographs/P0825.01.01.jpg" alt="" style="display:block; position:relative; height:300px"/>
<p class="padCaption">Annotation</p>
</td></tr>
</table>
</div>
</div>
</div>
I would be very grateful for any suggestions to help me narrow down and find the problem.
Regards
Chris
I'm using Jqtouch to design a iphone app.
As I'm using a standard header/toolbar at the top, I want to simply have it fixed there without moving. I found out how to do this by creating a div with class toolbar and setting CSS display to block and min-height to 0px with important.
However, when it starts up and every time I change pages (technically, it's making different divs display and not display(?)), it autoscrolls to the top of the div that it just changed to, and I need to scroll up to see the toolbar (the toolbar is at the very top, above the div).
How do I make it actually scroll up to the toolbar or top of the page?
Here's a simplified layout of my current code: (For body section)
<body>
<div id="toolbar" class="toolbar" style="display: block; min-height: 0px !important;">
<h1>Header</h1>
<a class="button" href="#">Button</a>
</div>
<div id="home" class="current">
<!--Content in here-->
Link to next page
</div>
<div id="next">
<!--Content in here-->
</div>
</body>
I am not entirely sure I got your question, but It sounds like you want to have an element with "fixed" position. If that's the case, you may want to try the solution I posted for this question.