I am building a wordpress site using jQuery with cycle plugin to cycle through some posts.
I have an image used as a full background, with this css:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
I have inserted the first image attachment url into the img.bg with a javascript from the loop. However, this understandably only works once, at page load.
This is the javascript:
$(function () {
$('.bg').attr('src', '<?php get_image_url(); ?>');
});
What I need, I guess is to fire off the script with each iteration of the cycle script, because the source shows that the get_image_url() function supplies the script with the unique url in each article div.
In the end, I even want some navigation buttons to move back and forth, switching the posts and the background simultanuously.
Any suggestions?
You can either use the cycle's next iteration function or using setInterval.
function changeImg()
{
$('.bg').attr('src', '<?php get_image_url(); ?>');
}
setInterval("changeImg()", 1000);
Hope this helps. But still, you would get output only once, when you execute the get_image_url();.
As for now, I use $(".bg").prependTo(document.body); to get the background images out of the article div, and then starting the cycle. This works, although some more problems might mount on the way.
Related
Hello I have a header that I am trying to get working and I just got the menu working correctly, but now I can't get the size working properly.
The header is located at www.g-evo.com/header.php and what I want to do is shrink the grey a little bit so its more flush with the logo. I still want to keep those coloured boxes in the white however.
The CSS looks as such:
<style type="text/css">
#header-container {
/* centering for IE */
text-align: center;
}
#menu {
width: 950px;
/* centering for other browsers */
margin: auto;
}
#logo {
width: 950px;
/* undo text-align on container */
text-align: left;
/* centering for other browsers */
margin: auto;
border-style:hidden;
border-width: thick;
}
body {
width: 950px;
/* undo text-align on container */
text-align: center;
/* centering for other browsers */
margin: auto;
}
#headercolor {
background-color:#EEEEEE;
}
</style>
Thank you
I believe this is actually a matter of your HTML markup, rather than your CSS. You have two #logo divs (as a side note, you should only use each ID once per page), the second of which is causing the extra gray space you are referring to.
You should put /header_media/GTextured.png and /header_media/shapeimage.png in the same div, and align them next to one another, which should solve your problem.
For starters, you're using the "logo" id on two different items on the same page... that's not correct, since the ID attribute should be unique per element.
On the other hand, I don't really understand what you want, but if it's just to get the menu a bit closer to the logo, I'd add a class or change the id for the second div with the logo ID and set it a height of 20px, or so..
I'm having following problem: my PHP page generates navigation menus from db like <ul> menus then with the help of JS shows it like multi-level menu. The problem is, it shows whole loading process. At first user sees something like that:
Then
How to hide whole loading process of page, or is there any other solution for this issue?
hide it in css,
#loading {
display: block;
background: url(loading.gif) no-repeat center center;
}
#container {
display: none;
}
and, in javascript show it again (this code uses jquery)
$(function(){
$('#loading').fadeOut(250, function(){
$('#container').show();
});
});
of course you can do this like anyhow you want, hide and show anything in css,
then on document ready, switch it over to the content. by hiding the loading div, and showing the content.
Set the style on display:none; until your page is completely loaded.
Generally this is done by showing/hiding a div or two over the top of your content. You can get a fancy loading gif from http://www.ajaxload.info/ to get you started. Then you'll want to place a DIV on your page:
<div id="loading">
<p><img src="loading.gif" /> Please Wait</p>
</div>
You'll want this hidden by default, so you'd need to add this CSS:
#loading { display:none; }
You'd also want to setup the display for this too:
#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
background-image:url("transparentbg.png"); }
#loading img {position: absolute; left:50%; top:50%}
The file transparentbg.png would be a 25x25 black PNG set to about 80% opaque. Next you would need a way to show and hide this with jQuery:
function showLoading() {
$("#loading").show();
}
function hideLoading() {
$("#loading").hide();
}
Use PHP and jQuery, currently displaying a slideshow of images with Colorbox.
I would like to include a DIV below each image (that is updated when each image is displayed with new content). Could be used to display related content, comments function, etc.
Researched around but yet to find any answers - anyone done this before or have any clues?
I think I need to know:
How (if?) an additional DIV can be added to the output of Colorbox
How I can react to the image changing (to update the DIV contents)
Thanks!
You could use the completed callback function to add the info. I made a demo, but I ended up absolutely positioning the caption to overlap the image... if you add it below you'll need to stretch the entire box (demo).
CSS
#cboxLoadedContent {
position: relative;
}
#extra-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #000;
color: #fff;
opacity: 0.8;
filter: alpha(opacity=80);
padding: 10px;
}
Script
$("a[rel]").colorbox();
$(document).bind('cbox_complete', function(){
// grab the text from the link, or whatever source
var extra = $.colorbox.element().text();
$('#cboxLoadedContent').append('<div id="extra-info">' + extra + '</div>');
});
I generate a div for my javascript automated validation script. It is generated with below code:
var alertbox = document.createElement("div");
Now how do i center that div programatically both horizontally and vertically?
Note: Currently I am showing an alert box but once i know how to center a div, i will
replace the alertbox with this dynamically generated div which will also provide some
lightbox-like effect.
Thanks
Note: For reference, you can download latest version of this script here.
Please note that i dont want to use external css for this because this is validation script and it should be able to do it programatically. For example:
using something like this can be helpful:
alertbox.style.position: whatever
....
It's a matter of applying the same CSS rules as you would have with static content. Horizontal centering can be achieved as described in this article - basically you give the div a fixed with and set left and right margins to auto. Vertical centering is a bit trickier - a few approaches are discussed here and detailed in this this blog post.
The tidiest way is probably to define a CSS class that takes care of the centering and then apply that class to the dynamically generated element like this:
alertbox.className = "myCssClass";
Update:
Since you are already using JavaScript for creating the div, you could of course use it for the centering as well (in combination with CSS absolute positioning) - that would actually probably be a cleaner solution (due to the hackishness of the CSS vertical centering). Exactly how you do this depends a bit on what tools you are using - it's probably much easier to achieve with a JS framework such as Prototype or jQuery than with "raw" JavaScript since browsers handle window/browser heights a bit differently.
If you are using jQuery, why not use the validation plugin?
You should be able to combine it with a modal window (like SimpleModal).
But if you don't want to change what you have already done, try something like this:
I would just apply some CSS rules to the div to position it (I've included an overlay which covers up the page and puts the alertbox on top):
Note: The reason the div is positioned to the far left is because you need to get the dimensions of the div with the contents inside. A hidden div will have a height and width of zero. Once the size is determined, it calculates the center of the page and positions the div.
CSS
#overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #000;
opacity: 0.8;
filter: alpha(opacity=80);
z-index: 100;
}
#alertbox {
background: #444;
padding: 10px;
position: absolute;
left: -99999px;
top: 0;
z-index: 101;
}
Script
function alertBox(alertMsg){
// Add overlay
$('<div id="overlay"></div>')
.hide()
.appendTo('body')
.fadeIn('slow');
// Add alert
$('<div id="alertbox"></div>')
.html(alertMsg)
.appendTo('body');
// calculate & position alertbox in center of viewport
var abx = $('#alertbox');
var abxTop = ($(window).height() - abx.height())/2;
var abxLft = ($(window).width() - abx.width())/2;
abx
.hide()
.css({ top: abxTop, left: abxLft })
.fadeIn('slow');
// add click to hide alertbox & overlay
$('#overlay, #alertbox').click(function(){
$('#overlay, #alertbox').fadeOut('slow',function(){
$('#alertbox').remove();
$('#overlay').remove();
});
})
}
For whatever reason, I have not been able to center a DIV using margin-right and margin-left. What I have found works better is to encapsulate them within a table (it's a bit globby code, but it works for me). And you can use the DOM style object to modify the margin as follows:
<table style="margin-left:auto;margin-right:auto;"><tr><td><div id="yourdiv"></div></td></tr></table>
Is it possible to preload all page contents (like showing a loading bar / animated gif.. or loading text.. ) until the contents are fully loaded and then displayed to the user/visitor ? If this is possible, can you give me just directions or resources to follow to achieve this. Because I was able to find image preloaders easily, but I am seeking for a preloading technique that will preload all content on the page before being displayed.
There's no need to use Ajax for this. Simply set the page's wrapper div display to none. Then change it to block when the document is loaded.
Your code might look like this, using vanilla javascript:
<script type="text/javascript">
function preloader() {
document.getElementById("preloader").style.display = "none";
document.getElementById("container").style.display = "block";
}
window.onload = preloader;
</script>
<style>
div#wrapper {
display: none;
}
div#preloader {
top: 0; right: 10px;
position:absolute;
z-index:1000;
width: 132px; height: 38px;
background: url(path/to/preloaderBg.png) no-repeat;
cursor: wait;
text-shadow: 0px 1px 0px #fefefe; //webkit
}
</style>
<body>
<div id="preloader">Loading... Please Wait.</div>
<div id="wrapper">
<!-- page contents goes here -->
</div>
</body>
Update, in jQuery:
<script type="text/javascript">
// Use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
$(document).ready(function(){
$("#preloader").hide();
$("#container").show();
});
</script>
Related documents: Events/ready, Events/load, CSS/css & Core/$
If you choose a method where the content is hidden until the whole page is loaded, don't have it initially hidden in CSS then unhidden in JavaScript. If you do that, anyone with JavaScript disabled or unavailable will get no page at all. Instead, do both the hiding and the showing from script.
<body>
<script type="text/javascript">
document.body.style.visibility= 'hidden';
window.onload= function() { document.body.style.visibility= 'visible'; };
</script>
Also note that the term ‘preloader’ isn't really right for what you're doing here. ‘pre’ implies that you're increasing performance by having the page fetched and cached so that it's ready to go by the time it's needed.
But actually this is the opposite: it decreases performance by waiting around showing the user nothing whilst the page is loading, when partial content is available. Defeating progressive rendering makes browsing slower, not faster. It is usually distinctly the Wrong Thing, and except in a few niche cases going with the normal browser progressive rendering is best. This is how the web works; people are used to it by now.
(People, that is, except for the kind of dim-witted management types who don't really use or understand the web but demand that their company's site appears all at once.)
Best way
function ajax(){
$('#wapal').html('path to image');
$.ajax({
url:'somfile.php',
method:'get',
success:function(data){
if(data =='') return;
$('#wapal').html(data);
}
});
}
I did something where I needed to know when an image was fully loaded, so I did the preloading with $.get() function and passed a callback function as the last parameter. This way, when the image was actually downloaded, my callback would fire and I would know that the browser already had the image in cache.
You can write a function that will increment a global variable for each image you tell it to preload, and then your callback can decrement the counter. When the counter is back to zero, call another function. This function now will fire once all images are preloaded.
This is for the images. Everything else can be guaranteed to be loaded when $(document).ready() is fired. So, if you begin your routine at this point, everything on the page should be loaded.
You can do it with jquery easily.
SCRIPT
$(window).load(function() {
$('#preloader').fadeOut('slow', function() { $(this).remove(); });
});
STYLES
div#preloader {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
}
HTML
div id="preloader"
Some modifications to DMus -Jerad Answer as it does't work when adsense is on the page.
You can do it with jquery easily.
SCRIPT
$(document).ready(function() {
$('#preloader').fadeOut('slow', function() { $(this).remove(); });
});
STYLES
div#preloader {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
}
HTML
div id="preloader"