I'm trying to do an if else statement for displaying one div or the other based on url but it's not working at all only one div constantly displays:
Div 1 is the only one that keeps showing, I've tried numerous work-arounds:
<script>
if (window.location.href.indexOf("pink") > -1)
{
document.getElementById("div2").style.display="none";
}
else {
document.getElementById("div1").style.display="none";
}
</script>
<div id= "div2">
<a id="link2" href="https://example2" target="_top"></a>
</div>
<div id= "div1">
<a id="link1" href="https://example1" target="_top"></a>
</div>
<style>
#link2
{
background: url(http://examplemy.com/wp-content/backtwo.PNG);
background-repeat: no-repeat;
background-size:cover;
}
#link1
{
background: url(http://examplemy.com/wp-content/backone.PNG);
background-repeat: no-repeat;
background-size:cover;
}
html, body {width: 100%; height: 100%; margin: 0;}
I've now put the script at the end but still not working.
Also, take my sites usr as examplemy/pink
The script is running before the divs are loaded. It won't be able to find them; you'll probably see errors in your development console if you open it when loading this page. You should either move the script below the divs, or put the code in an event handler for the load event of the window (window.addEventListener('load', function() { ... })) so that it won't run until the divs have loaded. (You can also use the DOMContentLoaded event instead of the plain load event for this case, though that's less well-known.)
Related
Most of my website visitors are using limited bandwidth & slow internet.
so I'm trying to reduce the load time and save their bandwidth by disable loading images & background images while the web-page is loading, then give an option to load the web-page's images when click "show images" button.
i'm thinking of some thing like lazy load but with on-click action.
I appreciate your suggestions.
One idea:
-Keep empty src attributes for images
-Store img urls on an attribute (you can call it data-src)
-Use Jquery to replace src with data-src value when page is loaded or when User clicks "show images"
I think there are 2 different scenarios:
IMG-TAGS
HTML:
<img src="" data-load="http://imagesource" alt="">
jQuery:
$('img[data-load]').each(function(){
$(this).attr('src', $(this).data('load'));
});
BACKGROUND-IMAGES
HTML:
<div class="background-placeholder"></div>
CSS:
.background-placeholder {
background-color:#fff;
width:250px;
height:250px;
}
.show-bg1 {
background-image:url('http://imagesource');
}
jQuery:
$('.background-placeholder').addClass('show-bg1');
CSS background-images are not loaded when a class isn't used (Same on hover etc.)
It's not the most efficient way to do this, but it could give you an idea on how its done.
Maybe you could store css-classes with the right background images also in data-attributes and loop through.
FIDDLE
The nested functions look a bit yucky, but here's a jQuery solution to your problem, using the method mentioned above.
$(document).ready(function(){ // wait until the document is loaded
$('#loadimages').click(function(){ // before registering the event handler
$('img[data-src]').each(function(){ // and for each image with a data-src attribute
$(this).attr('src', $(this).data('src')) // copy it's contents into the src attribute
})
})
})
img[data-src]{
width: 200px;
height: 400px;
background: grey;
position: relative;
}
img[data-src][src=""]::after {
content: 'Placeholder';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="" data-src="http://lorempixel.com/200/400"/>
<img src="" data-src="http://lorempixel.com/200/400"/>
<img src="" data-src="http://lorempixel.com/200/400"/>
<button id="loadimages">Load Images</button>
I coded a press page with some simplistic CSS lightbox code, it worked quite well until the loading time of the page became insane because it was loading all the images before they're even displayed.
With 10 or 12 images it was fine, but I've since added more images to the page and now it's a huge beast. I've implemented lazy-loading for the image covers, that's improved things a little.
The only thing I need now is for the lightbox images to load on click, not when you first navigate to the page. I'm looking for a simple html or CSS solution, but would settle for a Javascript or Jquery one if need be.
A link to the page:
http://agentboris.com/press/index-2.php#_
Here is the HTML for the image that includes the lightbox effect and lazy-loading:
Click to View
<a href="#_" class="lightbox parastyle" style="text-decoration: none; color: black;" id="moon2">
<br /><p class="parastyle" style="letter-spacing: 0.1em; text-decoration: none; color: black;">← BACK <br/></p>
<img src="images/lightbox-placeholder.png" data-src="images/moon2.jpg" height="353" width="753" class="round arrow-over">
</a>
And the CSS:
/** LIGHTBOX MARKUP **/
.lightbox {
/** Default lightbox to hidden */
display:none;
/** Position and style */
position: absolute;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 10000px;
left: 0;
background-color: #fafbff;
overflow:auto;
}
.lightbox img {
/** Pad the lightbox image */
/*max-width: 90%;*/
margin-top: 2%;
border: solid 1px #E0E0E0;
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
position: fixed;
top: 0;
left: 0;
/** Unhide lightbox **/
display: block;
}
Simply use lazySizes. Only thing you have to do is to alter your markup and add the class lazyload (assuming you already have data-src):
<img src="images/lightbox-placeholder.png" data-src="images/moon2.jpg" height="353" width="753" class="lazyload round arrow-over">
lazySizes then will automatically only load the image if the image becomes visible (by clicking on the thumb).
Not a php guy, but could you not make an API call to grab the image's src, rather than assigning them to an img?
Meaning, you have XX number of thumbnails (I'm assuming). But it's loading the bigger images that's the problem. Therefore, only have (1) lightbox, but switch out the image src on click.
Also, since you've named all of your images (big) with the suffix of -thumb, you don't really need to make an API call.
HTML
<div class="presscoll">
<a href="#boris-2014-awards" class="show-lightbox">
<img src="images/boris-2014-awards-thumb.jpg" width="470" class="round press arrow-over" />
</a>
..... more thumbnails
</div>
Only have (1) of these.
<a href="#_" id="show-lightbox" class="lightbox parastyle" style="text-decoration: none; color: black;" id="boris-2014-awards">
<br /><p class="parastyle" style="letter-spacing: 0.05em;">← BACK <br/></p>
<img src="images/boris-2014-awards.jpg" height="4064" width="800" class="round arrow-over">
</a>
$('.presscoll').on('click' 'a.show-lightbox', function(e) {
// get src and remove "-thumb"
var src = $(this).find('img').attr('src');
src = src.replace('-thumb', '');
// change image attr
$('#show-lightbox').find('img').attr('src', src);
// may need to call lightbox initialize again here
});
Basically we're just listing out all of your thumbnails, but there's no reason to load all XXX of the bigger images. Just have the base elements for the lightbox there and then switch the src on the "big" image. As stated above, you may need to re-call your lightbox.
This isn't tested btw, but the idea will work.
I am reloading the div every 10 seconds without reloading the whole page. And also when refresh happens, it greys out my div and show the refresh image and after refresh is done, it loads the data in my div table and it is working fine.
Below is the refresh image I am using -
.
Problem Statement:-
Below is my JSP file (dataInfo.jsp) and I am reloading the div container every 10 seconds without reloading the full page.
<body>
<div id='headerDivDash'>
<h1 id='topHeaderDash'>
<!-- some image here -->
</h1>
</div>
<div id="vertical-list" style='display: block; list-style-type: none;'>
<ul class="resp-tabs-list">
<li>Test 1</li>
<br />
<li>Test 2</li>
</ul>
</div>
<!-- just need to reload this div, other div should be intact without getting appended -->
<div class="container">
</div>
<div class="footer">Some Value Here</div>
</body>
Now below is the jquery script I am using to load the div container every 10 seconds and it works fine. I am able to see the refresh image and it also greys out so everything is working good so far.
// Create a refresh function:
function refresh(){
// SHOW overlay
$('#overlay').show();
// Retrieve data:
$.ajax({
url: 'dataInfo.jsp',
type: 'GET',
success: function(data){
// onSuccess take only the container content
var content = $($.parseHTML(data)).filter(".container");
//Replace content inside the div
$('.container').replaceWith(content);
// HIDE the overlay:
$('#overlay').hide();
}
});
}
$(document).ready(function(){
// Create overlay and append to body:
$('<div id="overlay"/>').css({
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: $(window).height() + 'px',
opacity:0.4,
background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
}).hide().appendTo('body');
// Execute refresh with interval:
setInterval(refresh, 1 * 1000);
});
Now as you see above, I have hardcoded the url for image. If I deploy my code in the production, then it will block this url because of firewall so somehow I need to load this image from my local folder in the project.
My directory structure is like this -
webapp/
|-- resources/
| +-- img/
| page-loader.gif
+- WEB-INF/
+-- views/
dataInfo.jsp
I tried using the path like this background: 'lightgray url("/testweb/src/main/webapp/resources/img/page-loader.gif") no-repeat center' it doesn't work that way also somehow.
So my question is - Is there any way I can rewrite the overlay div in my above jquery in the body of html somehow? Then I can use image tag which will work for me for sure.
<img src="page-loader.gif" />
As far as I see, the image should be placed in the center of the screen. This could be done by using an outer div for background and center the image inside it.
Add both div and img tag to the end of the body tag so:
<div class="footer">Some Value Here</div>
<div id="overlay" style="display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: lightgray; opacity: 0.4; ">
<img src="page-loader.gif" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;" />
</div>
</body>
The style attribute can be moved to a separate css file and replaced by the class attribute.
The $(document).ready code can be reduced so:
$(document).ready(function(){
// Execute refresh with interval:
setInterval(refresh, 1 * 1000);
});
Are you sure about your directory structure. I am presuming you are working with Java/JSP spring? and not Javascript!
I believe the Resource folder is one up from the web app folder and web app is your root. Have you tried url(/img/page-loader.gif)?
I have never coded before so i dont know much, i watched this youtube video on how to make a js button youtube video
<div style="position:absolute; margin-left:1202px;"
<input type="image" src="images/login.png"
onmouseover="javascript:this.src='images/loginpressed.png';"
onmouseout="javascript:this.src='images/login.png';" />
</div>
i can see that the code works in dreamweaver, but for somereason, others cannot see it on the website
You forgot a > after <div style="position:absolute; margin-left:1202px;". Because of that, the button is now part of your div's declaration.
B.t.w. You can achieve a similar result by using another element than input type=image, like a span or div or an actual link element (a href) and apply some CSS to give it a different background image. For instance:
HTML:
<span class="button" onclick="alert('clicked');">Caption</span>
CSS:
.button {
display: inline-block;
height: 30px;
background-image: url(normalstate.png);
}
.button:hover {
background-image: url(hoverstate.png);
}
It may possible that path to your images not found at other place.
I was just going through this beautiful website. Can anybody tell me how that designer has shown "The magic is loading" thing :
http://danielhellier.com/showcase/danielhellier/
The image just disappears as soon as the site is loaded complelely.
He is using javascript.
Look at the file http://danielhellier.com/showcase/danielhellier/js/jquery.bits.js
in the first line he fades out the loading div once the site has loaded:
$(window).load(function () {
$('#loading').fadeOut('slow');
});
The loading div:
<div id="loading">
<div align="center">
<p>The magic is loading</p>
<img src="img/loader.gif" alt="Loader" />
</div>
</div>
The CSS for the loading div:
#loading {
background: none repeat scroll 0 0 #1E1E1E;
color: #FFFFFF;
cursor: wait;
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 100;
}
Notice how the z-index is high to put it on top of everything and the height and width are 100% to make it take up the entire window with its opaque background.
Also he put that <div> before the rest of the HTML. So it will be loaded first and the JavaScript to remove it is triggered by the load event on the window which will not be triggered until everything has loaded.
A very nice effect.