I created a simple login webpage complete with CSS and Background images etc.
It uses PHP to access the database when you click LOGIN/SUBMIT.
The problem is when I do the testing/viewing using the Localhost in WAMP.
It displays the form and other content such as text and paragraphs..but the background images and images used as the border and button of the login page doesn't show. It just shows the broken image icon.
When I open the php page in the browser it displays everything the only thing it doesn't do right is the lookup in the database but that's understandable since the PHP server is in WAMP.
How do I make the images display correctly in the Localhost in WAMP?
Here's the code of my login page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/cssLoginPage.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//Put in the DIV id you want to display
launchWindow('#dialog1');
//if close button is clicked
$('.window #close').click(function () {
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
$(window).resize(function () {
var box = $('#boxes .window');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
box.css('top', winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);
});
});
function launchWindow(id) {
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', 10);
$(id).css('left', 780);
/*
//Set the popup window to center
$(id).css('top', winH/2-$(id).height());
$(id).css('left', winW/2-$(id).width()/2);
*/
//transition effect
$(id).fadeIn(2000);
}
</script>
<title>Untitled Document</title>
</head>
<body>
<div id="boxes">
<!-- Start of Login Dialog -->
<div id="dialog1" class="window">
<div class="d-header">
<form name="form1" method="post" action="loginproc.php">
<input name="myusername" type="text" id="myusername" value="username" onclick="this.value=''"/><br/>
<input name="mypassword" type="password" id="mypassword" value="Password" onclick="this.value=''"/>
</div>
<div class="d-blank"></div>
<div class="d-login"><input type="image" alt="Login" title="Login" src="./css/images/login-button.png"/></div>
</form>
</div>
<!-- End of Login Dialog -->
</div>
</div>
</body>
</html>
Here's the CSS:
#charset "utf-8";
/* CSS Document */
.loginTable {
width:300px; margin: 250px auto;
box-shadow: 1px 1px 3px #000;
}
body
{
background:url(../css/images/homepage.jpg)no-repeat top center;
}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:fixed;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
#boxes #dialog1 {
width:375px;
height:203px;
}
#dialog1 .d-header {
background:url(../css/images/login-header.png) no-repeat 0 0 transparent;
width:375px;
height:150px;
}
#dialog1 .d-header input {
position:relative;
top:60px;
left:100px;
border:3px solid #cccccc;
height:22px;
width:200px;
font-size:15px;
padding:5px;
margin-top:4px;
}
#dialog1 .d-blank {
float:left;
background:url(../css/images/login-blank.png) no-repeat 0 0 transparent;
width:267px;
height:53px;
}
#dialog1 .d-login {
float:left;
width:108px;
height:53px;
}
#boxes #dialog2 {
background:url(../css/images/notice.png) no-repeat 0 0 transparent;
width:326px;
height:229px;
padding:50px 0 20px 25px;
The src in the image tag needs to be like this:
<div class="d-login">
<input type="image" alt="Login" title="Login"
src="/css/images/login-button.png"/>
</div>
Note that the src property no longer has .. Also, make sure the image is in the www folder.
Related
i have a problem
i'm trying to edit a website
it has a scroller (behavior is like a inverted waterfall)
the website shows events (data) already recorded in the database...
i want to change the font size of the scroller, i tried to change all the labels there and nothing.
this is the CSS block
<style type="text/css">
body {
font-family: "Engravers MT", "Engravers MT",sans-serif;
line-height: 1em;
color: #f0edd9;
font-weight:bold;
font-size: 40px;
background-color:#8A0829;
}
pscroller1{
width: 500px;
height: 560px;
font-family: "old republic", "old republic";
font-size:50px;
border: 1px solid black;
padding: 5px;
background: red;
}
</style>
this is the scroller, i didn't do that, it was made by someone else.
<script type="text/javascript">
var pausecontent=new Array()
</script>
<script type="text/javascript">
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
here is how it set the message in the scroller
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
this is the body:
<body>
<!--<div align="center">
<img src="picture1.fw.png" align="absmiddle"/>
</div>
!-->
<div align="LEFT" style="width:1000px ">
<div style="height:570px; width:50%; float:right; background-color:#8A0829">
<?php
require_once('functions.php');
$phparray=events();
for($i=0; $i <count($phparray); $i++ )
{
echo '<script language="JavaScript"> pausecontent['.$i.'] = "'.$phparray[$i].'";</script>';
}
?>
<script type="text/javascript" >
document.writeln("EVENTS")
new pausescroller(pausecontent, "pscroller1", "", 5000)
document.write("<br />")
function refresh(time) {setTimeout("location.reload(true);",time);}
refresh(43200000); </script>
</div>
</div>
<div align="right"> EVENTS</div>
<div align="center" style="height:570px; width:300px; float:LEFT; background- color:#8A0829">
<embed src="video.vob" autostart="true" loop ="true" width="500" height="570" >
</div>
</div>
<div align="center">
<img src="background.jpg" align="absmiddle"/>
</div>
</body>
like you can see in the
new pausescroller(pausecontent, "pscroller1", "", 5000)
document.write("")
the pscroller1 should change the font color and size of the pausecontent but it does only change the style of the font of the data, although the return data of document.write (UNDEFINED) is working fine, it's size, style and color can be changed
pscroller1 is not an html entity. You cannot style it like that.
You can add an ID or a class to the 'pscroller' and style that
a{ <- html entity
.someClass{ <- styling a class
#someID{ <- styling an ID
I have this problem where a code is working on localhost but not when I upload it to the server.
I want to implement this:
Polaroid Photobar Gallery
Here's a link to my website:
Zodiac 2013
Note: You need to go the gallery tab to view it.
EDIT: Please view it in Google Chrome for best viewing experience.
I tried using FireBug but to no help. With the Inspect Element feature of google chrome, I figured out that the server didn't accept the javascript code written inside the document. The code is kind of huge involving many files, here's the main one:
THE HTML MARKUP
<h1>Polaroid Photobar Gallery</h1>
<div id="pp_gallery" class="pp_gallery">
<div id="pp_loading" class="pp_loading"></div>
<div id="pp_next" class="pp_next"></div>
<div id="pp_prev" class="pp_prev"></div>
<div id="pp_thumbContainer">
<div class="album">
<div class="content">
<img src="../images/album1/thumbs/1.jpg" alt="../images/album1/1.jpg" />
<span>The Sixties by Tetsumo</span>
</div>
<div class="content">
<img src="../images/album1/thumbs/2.jpg" alt="../images/album1/2.jpg" />
<span>The Sixties by Tetsumo</span>
</div>
<div class="content">
<img src="../images/album1/thumbs/3.jpg" alt="../images/album1/3.jpg" />
<span>The Sixties by Tetsumo</span>
</div>
<div class="content">
<img src="../images/album1/thumbs/4.jpg" alt="../images/album1/4.jpg" />
<span>The Sixties by Tetsumo</span>
</div>
<div class="content">
<img src="../images/album1/thumbs/5.jpg" alt="../images/album1/5.jpg" />
<span>The Sixties by Tetsumo</span>
</div>
<div class="content">
<img src="../images/album1/thumbs/6.jpg" alt="../images/album1/6.jpg" />
<span>The Sixties by Tetsumo</span>
</div>
<div class="descr">
The Sixties
</div>
</div>
<div class="album">
<div class="content">
<img src="../images/album2/thumbs/1.jpg" alt="../images/album2/1.jpg" />
<span>Butterfly Girl</span>
</div>
<div class="content">
<img src="../images/album2/thumbs/2.jpg" alt="../images/album2/2.jpg" />
<span>Mmmmmmh Strawberries</span>
</div>
<div class="content">
<img src="../images/album2/thumbs/3.jpg" alt="../images/album2/3.jpg" />
<span>Polaroid in Picture</span>
</div>
<div class="content">
<img src="../images/album2/thumbs/4.jpg" alt="../images/album2/4.jpg" />
<span>Girl with brown hair</span>
</div>
<div class="content">
<img src="../images/album2/thumbs/5.jpg" alt="../images/album2/5.jpg" />
<span>Hair up</span>
</div>
<div class="content">
<img src="../images/album2/thumbs/6.jpg" alt="../images/album2/6.jpg" />
<span>Smiling Girl</span>
</div>
<div class="descr">
Portraits
</div>
</div>
<div id="pp_back" class="pp_back">Albums</div>
</div>
</div>
<div>
<span class="reference">
back to the Codrops tutorial
</span>
</div>
THE CSS
.pp_loading{
display:none;
position:fixed;
top:50%;
left:50%;
margin:-35px 0px 0px -35px;
background:#fff url(../images/icons/loader.gif) no-repeat center center;
width:70px;
height:70px;
z-index:999;
opacity:0.7;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.pp_next, .pp_prev{
cursor:pointer;
top:50%;
margin-top:-16px;
width:32px;
height:32px;
position:fixed;
text-align:center;
border:1px solid #111;
color:#fff;
-moz-box-shadow:0px 0px 3px #000;
-webkit-box-shadow:0px 0px 3px #000;
box-shadow:0px 0px 3px #000;
}
.pp_next{
right:-40px;
background:#222 url(../images/icons/next.png) no-repeat center center;
}
.pp_prev{
left:-40px;
background:#222 url(../images/icons/prev.png) no-repeat center center;
}
#pp_thumbContainer{
position:fixed;
bottom:0px;
left:0px;
height:65px;
width:100%;
}
#pp_thumbContainer .album{
position:absolute;
width:200px;
height:65px;
bottom:-90px;
}
.album .descr,
.pp_back{
position:absolute;
bottom:0px;
left:-16px;
background:#222;
text-align:center;
border:1px solid #111;
padding:5px;
cursor:pointer;
width:169px;
color:#fff;
cursor:pointer;
text-shadow:0px 0px 1px #fff;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
.pp_back{
text-transform:uppercase;
bottom:120px;
left:-100px;
width:80px;
}
#pp_thumbContainer .content{
position:absolute;
top:0px;
height:155px;
cursor:pointer;
}
#pp_thumbContainer img{
border:5px solid #fff;
-moz-box-shadow:1px 1px 7px #000;
-webkit-box-shadow:1px 1px 7px #000;
box-shadow:1px 1px 7px #000;
}
#pp_thumbContainer .content span{
display:none;
}
.pp_preview{
position:fixed;
top:150%;
left:50%;
}
.pp_preview img{
position:absolute;
top:0px;
left:0px;
border:10px solid #fff;
border-bottom:45px solid #fff;
-moz-box-shadow:1px 1px 7px #000;
-webkit-box-shadow:1px 1px 7px #000;
box-shadow:1px 1px 7px #000;
}
.pp_descr{
height:45px;
line-height:45px;
font-size:28px;
width:100%;
bottom:0px;
left:0px;
position:relative;
text-align:center;
color:#fff;
}
h1{
font-size:50px;
margin:50px;
color:#333;
}
span.reference{
font-family:Arial;
position:fixed;
right:10px;
top:10px;
font-size:15px;
}
span.reference a{
color:#fff;
text-transform:uppercase;
text-decoration:none;
}
The code above is included in an external file named style1.css. You can find it on my website.
And, finally, THE JAVASCRIPT:
$(function() {
var ie = false;
if ($.browser.msie) {
ie = true;
}
//current album/image displayed
var enableshow = true;
var current = -1;
var album = -1;
//windows width
var w_width = $(window).width();
//caching
var $albums = $('#pp_thumbContainer div.album');
var $loader = $('#pp_loading');
var $next = $('#pp_next');
var $prev = $('#pp_prev');
var $images = $('#pp_thumbContainer div.content img');
var $back = $('#pp_back');
//we wnat to spread the albums through the page equally
//number of spaces to divide with:number of albums plus 1
var nmb_albums = $albums.length;
var spaces = w_width/(nmb_albums+1);
var cnt = 0;
//preload all the images (thumbs)
var nmb_images = $images.length;
var loaded = 0;
$images.each(function(i){
var $image = $(this);
$('<img />').load(function(){
++loaded;
if(loaded == nmb_images){
//let's spread the albums equally on the bottom of the page
$albums.each(function(){
var $this = $(this);
++cnt;
var left = spaces*cnt - $this.width()/2;
$this.css('left',left+'px');
$this.stop().animate({'bottom':'0px'},500);
}).unbind('click').bind('click',spreadPictures);
//also rotate each picture of an album with a random number of degrees
$images.each(function(){
var $this = $(this);
var r = Math.floor(Math.random()*41)-20;
$this.transform({'rotate' : r + 'deg'});
});
}
}).attr('src', $image.attr('src'));
});
function spreadPictures(){
var $album = $(this);
//track which album is opened
album = $album.index();
//hide all the other albums
$albums.not($album).stop().animate({'bottom':'-90px'},300);
$album.unbind('click');
//now move the current album to the left
//and at the same time spread its images through
//the window, rotating them randomly. Also hide the description of the album
//store the current left for the reverse operation
$album.data('left',$album.css('left'))
.stop()
.animate({'left':'0px'},500).find('.descr').stop().animate({'bottom':'-30px'},200);
var total_pic = $album.find('.content').length;
var cnt = 0;
//each picture
$album.find('.content')
.each(function(){
var $content = $(this);
++cnt;
//window width
var w_width = $(window).width();
var spaces = w_width/(total_pic+1);
var left = (spaces*cnt) - (140/2);
var r = Math.floor(Math.random()*41)-20;
//var r = Math.floor(Math.random()*81)-40;
$content.stop().animate({'left':left+'px'},500,function(){
$(this).unbind('click')
.bind('click',showImage)
.unbind('mouseenter')
.bind('mouseenter',upImage)
.unbind('mouseleave')
.bind('mouseleave',downImage);
}).find('img')
.stop()
.animate({'rotate': r+'deg'},300);
$back.stop().animate({'left':'0px'},300);
});
}
//back to albums
//the current album gets its innitial left position
//all the other albums slide up
//the current image slides out
$back.bind('click',function(){
$back.stop().animate({'left':'-100px'},300);
hideNavigation();
//there's a picture being displayed
//lets slide the current one up
if(current != -1){
hideCurrentPicture();
}
var $current_album = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')');
$current_album.stop()
.animate({'left':$current_album.data('left')},500)
.find('.descr')
.stop()
.animate({'bottom':'0px'},500);
$current_album.unbind('click')
.bind('click',spreadPictures);
$current_album.find('.content')
.each(function(){
var $content = $(this);
$content.unbind('mouseenter mouseleave click');
$content.stop().animate({'left':'0px'},500);
});
$albums.not($current_album).stop().animate({'bottom':'0px'},500);
});
//displays an image (clicked thumb) in the center of the page
//if nav is passed, then displays the next / previous one of the
//current album
function showImage(nav){
if(!enableshow) return;
enableshow = false;
if(nav == 1){
//reached the first one
if(current==0){
enableshow = true;
return;
}
var $content = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')')
.find('.content:nth-child('+parseInt(current)+')');
//reached the last one
if($content.length==0){
enableshow = true;
current-=2;
return;
}
}
else
var $content = $(this);
//show ajax loading image
$loader.show();
//there's a picture being displayed
//lets slide the current one up
if(current != -1){
hideCurrentPicture();
}
current = $content.index();
var $thumb = $content.find('img');
var imgL_source = $thumb.attr('alt');
var imgL_description = $thumb.next().html();
//preload the large image to show
$('<img style=""/>').load(function(){
var $imgL = $(this);
//resize the image based on the windows size
resize($imgL);
//create an element to include the large image
//and its description
var $preview = $('<div />',{
'id' : 'pp_preview',
'className' : 'pp_preview',
'html' : '<div class="pp_descr"><span>'+imgL_description+'</span></div>',
'style' : 'visibility:hidden;'
});
$preview.prepend($imgL);
$('#pp_gallery').prepend($preview);
var largeW = $imgL.width()+20;
var largeH = $imgL.height()+10+45;
//change the properties of the wrapping div
//to fit the large image sizes
$preview.css({
'width' :largeW+'px',
'height' :largeH+'px',
'marginTop' :-largeH/2-20+'px',
'marginLeft' :-largeW/2+'px',
'visibility' :'visible'
});
Cufon.replace('.pp_descr');
//show navigation
showNavigation();
//hide the ajax image loading
$loader.hide();
//slide up (also rotating) the large image
var r = Math.floor(Math.random()*41)-20;
if(ie)
var param = {
'top':'50%'
};
else
var param = {
'top':'50%',
'rotate': r+'deg'
};
$preview.stop().animate(param,500,function(){
enableshow = true;
});
}).error(function(){
//error loading image. Maybe show a message : 'no preview available'?
}).attr('src',imgL_source);
}
//click next image
$next.bind('click',function(){
current+=2;
showImage(1);
});
//click previous image
$prev.bind('click',function(){
showImage(1);
});
//slides up the current picture
function hideCurrentPicture(){
current = -1;
var r = Math.floor(Math.random()*41)-20;
if(ie)
var param = {
'top':'-150%'
};
else
var param = {
'top':'-150%',
'rotate': r+'deg'
};
$('#pp_preview').stop()
.animate(param,500,function(){
$(this).remove();
});
}
//shows the navigation buttons
function showNavigation(){
$next.stop().animate({'right':'0px'},100);
$prev.stop().animate({'left':'0px'},100);
}
//hides the navigation buttons
function hideNavigation(){
$next.stop().animate({'right':'-40px'},300);
$prev.stop().animate({'left':'-40px'},300);
}
//mouseenter event on each thumb
function upImage(){
var $content = $(this);
$content.stop().animate({
'marginTop' : '-70px'
},400).find('img')
.stop()
.animate({'rotate': '0deg'},400);
}
//mouseleave event on each thumb
function downImage(){
var $content = $(this);
var r = Math.floor(Math.random()*41)-20;
$content.stop().animate({
'marginTop' : '0px'
},400).find('img').stop().animate({'rotate': r + 'deg'},400);
}
//resize function based on windows size
function resize($image){
var widthMargin = 50
var heightMargin = 200;
var windowH = $(window).height()-heightMargin;
var windowW = $(window).width()-widthMargin;
var theImage = new Image();
theImage.src = $image.attr("src");
var imgwidth = theImage.width;
var imgheight = theImage.height;
if((imgwidth > windowW)||(imgheight > windowH)){
if(imgwidth > imgheight){
var newwidth = windowW;
var ratio = imgwidth / windowW;
var newheight = imgheight / ratio;
theImage.height = newheight;
theImage.width= newwidth;
if(newheight>windowH){
var newnewheight = windowH;
var newratio = newheight/windowH;
var newnewwidth =newwidth/newratio;
theImage.width = newnewwidth;
theImage.height= newnewheight;
}
}
else{
var newheight = windowH;
var ratio = imgheight / windowH;
var newwidth = imgwidth / ratio;
theImage.height = newheight;
theImage.width= newwidth;
if(newwidth>windowW){
var newnewwidth = windowW;
var newratio = newwidth/windowW;
var newnewheight =newheight/newratio;
theImage.height = newnewheight;
theImage.width= newnewwidth;
}
}
}
$image.css({'width':theImage.width+'px','height':theImage.height+'px'});
}
});
The javascript above is the code that written in the body section, and which the browser refuses to load, since, it is an internal code, FireBug doesn't help. I've used the following lines to include the necessary js files (in the head section):
<script src="js/jquery.min.js">
</script>
And this in the body section before writing the javascript code:
<script src="js/jquery.transform-0.8.0.min.js"></script>
The gallery seems to work perfectly when run on xampp server, but not when I upload it to the web server. Please help me!
Note: I've verified that all the files have been uploaded successfully onto my web server. I'm new to this site, so please pardon me for any mistakes and help me rectify them.
EDIT: The google chrome console shows me many 404s for the images, saying that they don't exist, while they do. I've checked the permissions of the folders too, and everything is fine, guess this is the main problem. Please help me here.
seems like that the file system is case sensitive on the server, bug insensitive on your local machine.
all images with suffix in lower case (*.jpg) could be loaded sucessfully, but upper ones (*.JPG) failed (404 not found). as your code always try to get the image with lower case
on your website:
It should be:
I have a main php file that loads an external php file. This is the code in my main php file:
<php>
<head>
<meta http-equiv="content-type" content="text/php; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type="text/javascript" src="ajax.js"></script>
<link rel="stylesheet" href="colorbox.css" />
<script src="js/jquery.colorbox.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<link href="jimgMenukwicks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad'});
});
</script>
</head>
<div id="tengah" class="jimgMenu" >
<ul>
<li class="landscapes"> </li>
<li class="people"> </li>
<li class="nature"> </li>
</ul>
</div>
<div id="content" class="clearfix shadow">
<div id="sidebar" class="left">
<div id='ResponseDiv'> </div>
<div id="menu" class="inner">
</div>
</div>
<div id="main" class="right">
<h2>Detail</h2>
<div id='ResponseDiv2'> </div>
</div>
</div>
</div>
</php>
I have a function in ajax.js that calls an external php page named ajaxpage. Here the code in ajax.js:
function ajaxpage(url, containerid) {
var page_request = false
if(window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if(window.ActiveXObject) { // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} catch(e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP")
} catch(e) {}
}
} else return false
page_request.onreadystatechange = function () {
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, containerid) {
if(page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1)) document.getElementById(containerid).innerHTML = page_request.responseText
}
The problem is when I try to load "7.php" into my main.php the 7.php file is loaded but the animation in 7.php not working.
Does anyone know why this is happening?
this is the content of 7.php
<php>
<html>
<head>
<style type="text/css">
body {
background: #0F0D0D;
padding: 30px 0 0 50px;
}
div.sc_menu_wrapper {
position: relative;
height: 500px;
/* Make bigger than a photo, because we need a place for a scrollbar. */
width: 160px;
margin-top: 30px;
overflow: auto;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 130px;
border: 2px rgb(79, 79, 79) solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
/* When image support is turned off */
color: #fff;
background: rgb(79, 79, 79);
}
.sc_menu a:hover {
border-color: rgb(130, 130, 130);
border-style: dotted;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading {
position: absolute;
top: 50px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid rgb(79, 79, 79);
background: #1F1D1D;
}
/* Styling tooltip */
.sc_menu_tooltip {
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid rgb(79, 79, 79);
background: rgb(0, 0, 0);
/* Make background a bit transparent for browsers that support rgba */
background: rgba(0, 0, 0, 0.5);
}
/* Here are styles for a link to an article. Not for you :) */
#back {
margin-left: 8px;
color: gray;
font-size: 18px;
text-decoration: none;
}
#back:hover {
text-decoration: underline;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">/*<![CDATA[*/
function makeScrollable(wrapper, scrollable){
// Get jQuery elements
var wrapper = $(wrapper), scrollable = $(scrollable);
// Hide images until they are not loaded
scrollable.hide();
var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);
// Set function that will check if all images are loaded
var interval = setInterval(function(){
var images = scrollable.find('img');
var completed = 0;
// Counts number of images that are succesfully loaded
images.each(function(){
if (this.complete) completed++;
});
if (completed == images.length){
clearInterval(interval);
// Timeout added to fix problem with Chrome
setTimeout(function(){
loading.hide();
// Remove scrollbars
wrapper.css({overflow: 'hidden'});
scrollable.slideDown('slow', function(){
enable();
});
}, 1000);
}
}, 100);
function enable(){
// height of area at the top at bottom, that don't respond to mousemove
var inactiveMargin = 99;
// Cache for performance
var wrapperWidth = wrapper.width();
var wrapperHeight = wrapper.height();
// Using outer height to include padding too
var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
// Do not cache wrapperOffset, because it can change when user resizes window
// We could use onresize event, but it's just not worth doing that
// var wrapperOffset = wrapper.offset();
// Create a invisible tooltip
var tooltip = $('<div class="sc_menu_tooltip"></div>')
.css('opacity', 0)
.appendTo(wrapper);
// Save menu titles
scrollable.find('a').each(function(){
$(this).data('tooltipText', this.title);
});
// Remove default tooltip
scrollable.find('a').removeAttr('title');
// Remove default tooltip in IE
scrollable.find('img').removeAttr('alt');
var lastTarget;
//When user move mouse over menu
wrapper.mousemove(function(e){
// Save target
lastTarget = e.target;
var wrapperOffset = wrapper.offset();
var tooltipLeft = e.pageX - wrapperOffset.left;
// Do not let tooltip to move out of menu.
// Because overflow is set to hidden, we will not be able too see it
tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
// Move tooltip under the mouse when we are in the higher part of the menu
if (e.pageY - wrapperOffset.top < wrapperHeight/2){
tooltipTop += 80;
}
tooltip.css({top: tooltipTop, left: tooltipLeft});
// Scroll menu
var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
wrapper.scrollTop(top);
});
// Setting interval helps solving perfomance problems in IE
var interval = setInterval(function(){
if (!lastTarget) return;
var currentText = tooltip.text();
if (lastTarget.nodeName == 'IMG'){
// We've attached data to a link, not image
var newText = $(lastTarget).parent().data('tooltipText');
// Show tooltip with the new text
if (currentText != newText) {
tooltip
.stop(true)
.css('opacity', 0)
.text(newText)
.animate({opacity: 1}, 1000);
}
}
}, 200);
// Hide tooltip when leaving menu
wrapper.mouseleave(function(){
lastTarget = false;
tooltip.stop(true).css('opacity', 0).text('');
});
/*
//Usage of hover event resulted in performance problems
scrollable.find('a').hover(function(){
tooltip
.stop()
.css('opacity', 0)
.text($(this).data('tooltipText'))
.animate({opacity: 1}, 1000);
}, function(){
tooltip
.stop()
.animate({opacity: 0}, 300);
});
*/
}
}
$(function(){
makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
</script>
</head>
<body>
<div style="overflow: hidden;" class="sc_menu_wrapper">
<div style="display: block;" class="sc_menu">
</div>
<div style="display: none;" class="loading">Loading...</div><div style="opacity: 0;" class="sc_menu_tooltip"></div></div>
</body></html>
</php>
See Hotel
This code will work...
I created a custom gallery and it works perfectly in internet explorer however in firefox and chrome it doesn't work like it should. The lightbox doesn't pop up on the clicking the thumbnail link, you have to click it twice, when clicked once the backdrop comes up but not the lightbox, but then on clicking the thumbnail twice it centers and pops up. And I have no clue why, please help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Album</title>
<script type="text/javascript" src="hftpnyc/js/jquery-1.7.1.min.js"></script>
<link href="albums.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="Website/print.css" rel="stylesheet" type="text/css" media="print"/>
<style type="text/css">
body {
}
.backdrop
{ position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background:black;
z-index:50;
display:none;
}
.smllpic a {text-decoration:none;}
.box
{margin:auto;
clear:both;
position:fixed;
max-height:705px;
max-width:905px;
background:black;
z-index:52;
padding:0px;
border:black 1.2px solid;
overflow:hidden;
}
.close
{
position:absolute;
right:6px;
margin-top:3px;
cursor:pointer;
font-size:20px;
font-family:acens;
font-weight:700px;
font-stretch:narrower;
opacity: .3;
}
.smllpic img{cursor:pointer; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); };
}
</style>
</head>
<body>
<div id="contentcontainer" style="width:100%;clear:both;">
<div id="wrapper" style="width:981px; height:100%; margin:0px auto;">
<div style="margin:0px auto;width:979px;">
<h2 style="font-family:Tahoma, Geneva, sans-serif; color:#333;border-bottom:#A3308E solid 1px; background-color: #E6E6E6;"> Album </h2> </div>
<div style="float:right; margin-right:3px;">
<form action="" method="post">
<a href="Albums.php">
<input type="button" name="Uploadmre" value="Upload more" style="border: 1px solid #d0ccc9;right:0px;background: #fff;color: #5f95ef;font-size: 11px;font-weight: 700;height:22px; margin-right:7px;">
</a>
</form>
</div>
<div id="page-wrap" style=" width:918px; margin: 0px auto;clear:both;">
<?php
error_reporting(0);
/* function: returns files from dir */
function get_files($images_dir,$exts = array('jpeg','gif','png','jpg')) {
$files = array();
if($handle = opendir($images_dir)) {
while(false !== ($file = readdir($handle))) {
$extension = strtolower(get_file_extension($file));
if($extension && in_array($extension,$exts)) {
$files[] = $file;
}
}
closedir($handle);
}
return $files;
}
/* function: returns a file's extension */
function get_file_extension($file_name) {
return substr(strrchr($file_name,'.'),1);
}
$images_dir = 'hftpnyc/thumbs/';
$thumbs_dir = 'hftpnyc/thumbs/thumbnails/';
$thumbs_width = 100;
$images_per_row = 11;
$string = "";
/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
$index = 0;
foreach($image_files as $index=>$file) {
$index++;
$thumbnail_image = $thumbs_dir.$file;
//if(!file_exists($thumbnail_image)) {
//$extension = get_file_extension($thumbnail_image);
//if($extension) {
//make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);
//}
//}
error_reporting(0);
echo '<div class="smllpic" style=" padding: 0px; margin: 0px; border: 1px solid black; display: block; width: 100px; height:100px; float: left; "> <img id="thumbs" src="',$thumbnail_image,'" width="100px"/></div>';
if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }
}
}
else {
echo '<p>There are no images in this gallery.</p>';
}
?>
</div>
</div>
</div>
<script type="text/javascript">
$(document).height();
$('.backdrop').height($(document).height());
$(document).ready(function(){
$('.smllpic img').hover(function () {
var $this = $(this);
$this.stop().animate({'opacity':'1.0'},200);
},function () {
var $this = $(this);
$this.stop().animate({'opacity':'0.7'},200);
});});
$(window).bind("load", function() {
var preload = new Array();
$(".box").each(function() {
s = $(this).attr("src").replace(/\.(.+)$/i, "_on.$1");
preload.push(s)
});
var img = document.createElement('img');
$(img).bind('load', function() {
if(preload[0]) {
this.src = preload.shift();
}
}).trigger('load');
});
$(document).ready(function(){
function centreit(){
//get the height and width of the modal
var modal_height = $('.box').height();
var modal_width = $('.box').width();
//get the height and width of the page
var window_width = $(window).width();
var window_height = $(window).height();
//calculate top and left offset needed for centering
var topp = (window_height - modal_height)/2;
var left = (window_width - modal_width)/2;
//apply new top and left css values
$('.box').css({'top' : topp+'px' , 'left' : left+'px', 'right': left+'px','bottom':topp+'px'}); };
$('.lightbox').click(function(e) {
e.preventDefault(); // keeps new page from loading
var thisPicture = $(this).attr('href'); // path to full sized picture,
function getit(){
$('body').append('<div class="backdrop" label="click to close"></div><div class="box" id="centre" ><div class="close">x</div><div style="cursor:pointer; opacity:1;font-family:Agency FB;margin-top:50%; right:-20px;position:fixed;color:white;font-size:50px; z-index:50;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-moz-box-shadow:0px 0px 5px #444444;-webkit-box-shadow:0px 0px 5px #444444;box-shadow:0px 0px 5px #444444;">></div><div style="cursor:pointer; opacity:.35;font-family:Agency FB;margin-top:50%; left:-20px; position:absolute; font-size:50px;color:white; z-index:70;-webkit-border-radius:5px;-moz-border-radius: 5px; border-radius:5px;-moz-box-shadow:0px 0px 5px #444444; -webkit-box-shadow:0px 0px 5px #444444; box-shadow:0px 0px 5px #444444;"><</div><img class="motown" src="'+thisPicture+'" style="max-height:705px;max-width:905px;z-index:50;"/></div>');
};
$(window).resize(function(){
$('.box').resize();
$('.motown').resize();
centreit();
});
getit();
centreit();
$("html").css("overflow", "hidden");
$('.backdrop').fadeTo(500,0.9);
$('.box').children().fadeIn(1000);
//$('.backdrop').css({ 'display' : 'block', opacity : 0});
$('.close').click(function(){
close_box();});
$('.backdrop').click(function(){
close_box();});
function close_box(){
$('.backdrop').remove();
$('.box').remove();
$("html").css("overflow", "");};
});});
</script>
</body>
</html>
You should try:
margin: 0 auto 0;
left: 0;
right: 0;
To fix the centering. So that would leave you with:
.box
{
margin:0 auto 0;
left: 0;
right: 0;
clear:both;
position:fixed;
max-height:705px;
max-width:905px;
background:black;
z-index:52;
padding:0px;
border:black 1.2px solid;
overflow:hidden;
}
When the user is hovering on a radio button/its label i want to display another radio button, that user can also select but if mouse moves the 2nd radio button hides again. i have found this last jquery snipet that shows choices while hovering on link tag
http://www.stylesfirst.com/coding/easy-show-hide-with-jquery/
<html>
<head>
<style type="text/css">
p.trigger {
padding: 0 0 0 20px;
margin: 0 0 5px 0;
background: url(plusminus.jpg) no-repeat;
height: 15px;
font-size: 14px;
font-weight: bold;
float:left;
}
p.trigger a {
color: #474747;
text-decoration: none;
display: block;
cursor:pointer;
}
p.trigger a:hover {
color: #ff4b43;
}
p.active {
background-position: left bottom;
}
.toggle_container {
margin: 0 0 5px;
padding: 0;
overflow: hidden;
clear: both;
}
.toggle_container .block {
padding: 0px 0px 0px 15px;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('.toggle_container').hide();
jQuery('p.trigger').hover(function(){
jQuery(this).toggleClass('active').next().toggle('slow');
});
});
</script>
</head>
<body>
<p class="trigger"><a>Click here</a></p>
<div class="toggle_container">
<div class="block">
<input id='element_1_1' name='element_1' class='element radio' type='radio' value='8'/>
<label class='choice' for='element_1_1'>Somewhere in the middle</label>
</div>
</div>
</body>
</html>
The easiest answer would be, if you could afford it, put both <input type="radio"/>s under a <div/> and control hovering behavior on that <div/>. This is commonly done with menus for the very same purpose.
Plus if you target new browsers, you can leave jQuery out of this - it can be done with any browser that understands the :hover pseudo-class on non-<a/>s.
Here's a sample page demonstrating both options.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#radios').hover(
function() { $('#radios').addClass('hover'); },
function() { $('#radios').removeClass('hover'); }
);
});
</script>
<style type="text/css">
/* option 1 - jquery + css, for older browsers */
#div-radio2 {
display: none;
}
.hover #div-radio2 {
display: block;
}
/* option 2 - no jquery, plain css, if you target only new browsers */
#radios:hover #div-radio2 {
display: block;
}
</style>
</head>
<body>
<div id="radios">
<div id="div-radio1"><input type="radio" id="radio1" /><label for="radio1">Radio 1</label></div>
<div id="div-radio2"><input type="radio" id="radio2" /><label for="radio2">Radio 2</label></div>
</div>
</body>
</html>
Are you looking for something like this
http://jsfiddle.net/HezZa/