Display background image if JavaScript disabled - html

I've got a div block that uses a parallax scroller to display parallax wallpaper:
<div class="parallax-window" data-parallax="scroll" data-image-src="whatever.jpg" id="MyElement">
<!-- lots of nested HTML -->
</div>
I saw a neat trick for using hidden to hide a div when there is no JavaScript, but I don't want to hide all the nested blocks here. Is there a clean way to do this, other than setting the class to a simple wallpaper class then using document.getElementById("MyElement").className = "parallax-window"; to override?

try the <noscript> tag:
<noscript>
<style>
div{
background-image: url("image.png");
}
</style>
</noscript>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript

Related

How to set custom CSS for data-src

I know that we can set css for a image via id or its class. My images in the site are coded as below
<img class="img-responsive" id="loader" src="{{asset('img/loader.gif')}}" data-src="{{asset('uploads/banner01.jpg')}}" >
Attributes of the images
loader.gif
Width:200px
Height:200px
banner01.jpg
Width:500px
Height:400px
Custom CSS added via loader id
#loader{
width: 200px;
height: 200px;
}
My problem is that when I add this custom CSS it works fine with 200px width and 200px of height but it also explicable to banner01.jpg too.
Means even banner width 500px and height 400px after loading image it shows as a 200px X 200px image.
What I want to know
Is there is a way to add custom css to data-src ?
There is a better solution to load images, videos and contents after page rendered called lazy load.
There is a very simple JQuery plugin to implement that with very few lines of codes.
http://jquery.eisbehr.de/lazy/
There are only 3 steps.
Add CDN or download and link the plugin.
2.Add "lazy" to class attribute of img tag.
EG:
<img class="lazy" data-src="images/1.jpg" />
3.Add this JQuery function.
<script>
$(function() {
$('.lazy').lazy();
});
</script>
To add a gif for loading just change your function to this.
// plugin build-in placeholder management
$(function() {
$('.lazy').lazy({
placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7..."
});
});
For a demo check this link.
http://jquery.eisbehr.de/lazy/example_basic-usage
You will try below custom css
img:not([data-src$="loader.gif"]) {
Width:500px
Height:400px
}
I think you should load these two images to two image tags. And put it in the same div.
And put this css id to div.
<div id="loader">
<img class="img-responsive" src="{{asset('img/loader.gif')}}">
<img class="img-responsive" data-src="{{asset('uploads/banner01.jpg')}}" style="width:500px;height:400px">
</div>

Use CSS to replace the content of elements based on the content of another

I'm trying to write some CSS that might take the page title (defined by a h1 element's content) and stick that content into every element with the class "DocTitle". I'm limited to using CSS and HTML.
Suggestions?
<head>
<style>
.DocTitle {
content: element(runningheader);
.pagetitle h1 {
position: running(runningheader);
}
</style>
</head>
<body>
<div class="DocTitle"></div>
<h1 class="pagetitle">This is the page title</h1>
<span class="DocTitle">This should be replaced</span>
</body>
Based on research, I would have thought this might have worked, but I think it only works if you use page at-rules, and I don't think I can apply content to a class in an at-rule. I'm not 100% on that though, because I'm not really sure what I can and cannot do in an at-rule. For reference, this is for use in generating print media.

making div invisible and after clicking link make it visible

I have two different div's I want to make one of them invisible and after clicking the link or button I want it to be visible and the other invisible. I don't know javascript so I know only HTML and CSS. Can I do that with only using HTML&CSS and How can I do that? Thanks.
You need to use jQuery for this.
Just add this line to your head tag:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
If your HTML is like this:
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
<button id="button1">Toggle divs</button>
CSS:
#div2 {
display:none;
}
At the bottom of your page, just before the closing tag </body> add the following JavaScript:
<script>
$("#button1").on("click", function () {
$("#div1, #div2").toggle();
}
</script>
Here's a link for a similar example:
http://api.jquery.com/toggle/#entry-examples

How to change iframe src using css

I am trying to remove ads from my profile on a website, so I don't have access to the original css or code, but there is still the ability to change the css code by editing the profile.
For example I have added these lines:
<style type="text/css">
.topad {display:none; visibility:hidden;}
#buyers_ad {display:none; visibility:hidden;}
</style>
which removes an advertisement from the top and right side of the page.
The problem is that there is an iframe that points to an advertisement. Is it possible to change the src that the iframe points to using css, but not html? The iframe does not have a class or id.
It's an iframe inside a div, if that is helpful.
You can make iframe hidden using css
Html:
<div id="somediv">
<iframe .... />
</div>
css:
<style type="text/css">
#somediv > iframe { display : none}
</style>
Or you can also change src of iframe using Jquery / JS
Html:
<div id="somediv">
<iframe .... />
</div>
Jquery:
$('#somediv iframe').attr('src','http://google.com');
Hope It Helps You.. :)
Use jQuery thats the better option to hide

How can I swipe/scroll horizontally with acceleration/deceleration through a set of images in a DIV on a mobile site using only HTML and CSS

I want to allow mobile site users to swipe/scroll through a list of icons.
The icons are div tags containing img tags.
The user should be able to swipe the container, scrolling/sliding the elements left or right.
The images need to slide smoothly with acceleration and deceleration.
Needs to work on iOS and Android.
We needed something like this sometime back, so I made a demo for it at that time. It's pretty basic, but it'll lay up all the ground work you need. First, lets start with the markup :
Markup
Since you mentioned jQM in the tag section of your question, Im gonna go with jQM [data-role=page] markup. You'd have a structure like this :
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Slideshow</h1>
</div>
<div data-role="content">
<div class="images">
<!--your images here -->
</div>
</div>
</div>
So you'd put all your images in the div with class=images. A particular group of images were encapsulated within a tags like this :
<a href="#">
<img src="25AC.jpg" />
</a>
<a href="#">
<img src="nature.jpg" />
</a>
<!--so on-->
You'd place this inside div.images. So that's about the markup we have.
CSS
The stylesheet part is simple.
.images {
height : 280px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
background-color : #272722;
}
.images a{
padding : 14px 5px 0px 5px;
margin: 5px 3px 0px 3px;
vertical-align: middle;
display: inline-block;
}
images img {
max-width: 100%;
max-height:512px;
}
Important properties to note here :
The overflow-x, overflow-y properties : The former needs to be enabled and the latter needs to be disabled. Only then the scroll will happen when you swipe right or left.
The white-space property : This is important to make the images come in a straight horizontal layout.
The max-width property : This is for scaling the images on mobile.
That's it! You're done!
Extras
I just added a popup to show the image when its tapped so that I'd be able to demonstrate the event handling. Here's the popup :
<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="b" data-corners="false">
Close
<div id="stuff"></div>
</div>
I'd be putting the image inside div#stuff when the a surrounding the img is clicked. Here's the JS :
//pageinit event of page
$(document).on("pageinit", "[data-role=page]", function() {
//cache popup for future use
var $popup = $("#popupInfo");
//click event for "a" tag inside .images
$(this).on("click", ".images > a[href=#]", function(e) {
//prevent default action
e.preventDefault();
//clone the image inside "a"
var $img = $(this).find("img").clone();
//add the cloned image inside #stuff
$popup.find("#stuff").html($img);
//open popup()
$popup.popup().popup("open");
});
});
Demo & Code
Demo & Code at jsbin.com
Alternatives
You could try out swipejs, which is jQuery plugin which will provide a much more sophisticated functionality. Here's the link to the site.