i am developing a web application,I have made some div which is visible in each browser.one of my div is not showing up on firefox.What are the possible reasons.
here is my fiddle
i have given the background-color:black to the div which is not showing up.
css
html, body
{
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
#main_header
{
height:20%;
border-bottom:3px solid grey;
}
#user_info
{
height:40%;
width:auto;
float:right;
text-align:right;
position:relative;
right:3%;
top:42%;
}
#user_info span
{
font-size:1.2em;
font-weight:600;
}
#logo
{
height:60%;
width:25%;
float:left;
background-image:url('../images/ibuildmart_logo.png');
background-repeat:no-repeat;
background-size:100% 100%;
position:relative;
left:5%;
top:20%;
}
#main_wrapper
{
height:75%;
}
#menu_wrap
{
width:10%;
float:left;
height:100%;
background-color:yellow;
}
#content_wrap
{
width:90%%;
height:100%;
float:right ;
}
#content
{
background-color:black;
width:95%;
height:92%;
border-radius:20px;
-moz-border-radius:20px;
margin:2%;
overflow:auto;
}
#main_footer
{
height:5%;
background-color:blue;;
}
html
<div id="main_header">
<?php
include_once('header.php');
?>
</div>
<div id="main_wrapper">
<div id="menu_wrap">
</div>
<div id="content_wrap">
<div id="content">
</div>
</div>
</div>
<div id="main_footer">
<?php
include_once('footer.php');
?>
</div>
Firs thing is the HTML comments are not closed properly. And the main reason is you are using double % in ID content_wrap.
Here is the Demo.
#content_wrap
{
width:90%%; /*you are using double percentage here*/
height:100%;
float:right;
}
You have multiple problems:
http://jsfiddle.net/uZd3u/2/
You closed your HTML comments with --!> which is wrong. It have to be like this: <!-- comment -->
Your content_wrap was float: right;
Related
i made one site,it's looks like this with 100% zoom.
and with 25% zoom
so,question is when i do 25% zoom it will make my font smaller but not the image(slider) how it can be done?please help me.my code is here...
<?php include('header.php');?>
<!------ Slider_bg ------------>
<div class="slider_bg">
<div class="wrap">
<!------ Slider------------>
<div class="slider" style="margin-top:-5px;">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<?php
$qur="SELECT img FROM home_slider";
$res=mysql_query($qur);
while ($row=mysql_fetch_array($res)) {
?>
<img src="admin/public/img/home_slider/<?php echo $row[0];?>" data-thumb="" alt="" />
<?php
}
?>
</div>
</div>
</div>
<!------End Slider ------------>
<div class="about-info">
<center>Welcome to AARYA-VEER Campus</center>
<p>Since its inception in the year of 2014, we made a constant endeavourto provide quality education and a platform for overall development to the students.</p>
<p>This institute is recognized by All India Council of Technical Education (AICTE) and affiliated with Gujarat Technological University(GTU).</p>
<p>Situated on the out-skirts of Rajkot City, Aaryaveerhas a sprawling and green campus of 27 acres with excellent infrastructure. The AaryaveerCampus is well connected through road with Private Buses and private operators plying from city. The fully residential campus offers students a peaceful and conducive study environment along with facilities like hostel, mess, canteen, indoor & outdoor sports center.</p>
<p>The education pattern at Aaryaveerhas a right blend of academia and industry with professionals, mentors, and advisors interacting with student throughout the year, offering enormous opportunities to our students for live projects, internships and placements.</p>
<p>Aaryaveer strives to provide rich and complete study experience to its students through cutting –edge amenities, research and innovation, that will assist students in building a successful professional path.</p>
</div><br><br>
<div class="clear"></div>
<div class="transpo1_head">
<h3>Approved By AICTE</h3>
</div>
<div class="transpo1_head">
<h3>Affiliated To GTU</h3>
</div>
<div class="transpo1">
<img src="web/images/AICTE.png" width="160" height="175">
</div>
<div class="transpo1">
<img src="web/images/GTU.png" width="160" height="175">
</div>
</div>
</div>
</div>
<!--main-->
<div class="main_bg">
<div class="main_btm">
<div class="wrap">
<div class="main_home">
<div class="gallery">
<h3>Photo Gallery</h3>
<ul>
<?php
$qur="SELECT img FROM gallery LIMIT 6";
$res=mysql_query($qur);
while ($row=mysql_fetch_array($res)) {
?>
<li><img src="admin/public/img/gallery/<?php echo $row[0];?>" alt=""></li>
<?php
}
?>
</ul>
</div>
<div class="see_more">
<span><font color="#FC2B5F">See More...</font></span>
</div>
<script type="text/javascript" src="web/js/jquery.lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="web/css/lightbox.css" media="screen">
<script type="text/javascript">
$(function() {
$('.gallery a').lightBox();
});
</script>
<div class="terminals">
<h3>Addmission Procedure</h3>
<p>Admission to the Institute is done through centralized admission procedure by Joint Admission Committee for Professional Courses (JACPC), Ahmedabad, of State Government for 100% seats as per the rules & regulations.. For more information,</p>
<font color="#FC2B5F">See More...</font>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<?php include('footer.php');?>
and css for that is.
.slider{
position:relative;
}
.theme-default .nivoSlider {
position:relative;
background:#fff url(../images/loading.gif) no-repeat 50% 50%;
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
text-align: center;
padding-top:10px;
}
.theme-default .nivo-controlNav a {
display:inline-block;
width:15px;
height:15px;
background:#999999;
border-radius:2em;
text-indent:-9999px;
border:0;
margin:0 4px;
}
.theme-default .nivo-controlNav a.active,.theme-default .nivo-controlNav a:hover{
background:#e1184a;
}
.theme-default .nivo-directionNav a {
display:block;
width:40px;
height:40px;
background:url(../images/l-r-arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
background-position:0px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
background-position:-40px 0;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
background:url(../images/prev.png) no-repeat;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
position: absolute;
bottom:25px;
right: 44px;
z-index: 9;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
#media all and (max-width:320px) {
.nivo-controlNav {
bottom:5px;
}
}
It is clear to see that your slider takes up the same percentage of the screen in both cases. We would need to see the CSS for the slider, but essentially just change % values to absolute ones.
so I got a while loop display the names and some css and jquery to make it so when you hover over one of the boxes made in the while loop it will have a little description telling about that result scroll up. But the problem is all the description boxes are overlapping each other. What am I doing wrong?
Css
.App_display {
border: 2px solid black;
padding:30px;
background:white;
border-radius:25px;
float:left;
width:190px;
height:100px;
margin:10px;
}
.boxTop { position:absolute; z-index:9; top:0; left:0; height:inherit; width:inherit;
overflow:hidden;}
.description { position:absolute; bottom:-50px; height:40px; width:459px; background-color:#000; opacity:.7; font-size:16px; color:#fff; padding:10px; }
Jquery
<script>
$('.App_display').hover(function() {
$(this).find('.description').stop().animate({
bottom: '0px',
})
},
function() {
$(this).find('.description').stop().animate({
bottom: '-50px',
})
});
</script>
Html(This code is generated in a while loop)
<div class="App_display">
<div class="boxTop">
<div class="description"><?php echo $name; ?></div>
</div>
</div>
.App_display {
border: 2px solid black;
padding:30px;
background:white;
border-radius:25px;
float:left;
width:190px;
height:100px;
margin:10px;
}
.boxTop { position:absolute; z-index:9; top:0; left:0; height:inherit; width:inherit;
overflow:hidden;}
.description { position:absolute; bottom:-50px; height:40px; width:459px; background-color:#000; opacity:.7; font-size:16px; color:#fff; padding:10px; }
<div class="App_display">
<div class="boxTop">
<div class="description">Item1</div>
</div>
</div>
<div class="App_display">
<div class="boxTop">
<div class="description">Item2</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.App_display').hover(function() {
$(this).find('.description').stop().animate({
bottom: '0px',
})
},
function() {
$(this).find('.description').stop().animate({
bottom: '-50px',
})
});
</script>
in css when you use position absolute it will set the position of the element relative to the first non static ancestor element, in your case probably the window.
so you need to set the next ancestor to a non static position then it will fix your issue
add to your App_display class this line:
.App_display {
position:relative;
}
I'm currently working on a "webshop" kind of project. I am creating a product panel with a
float:left; property but when I loop the products they are not coming next to each other but underneath the previous one.. What am I missing?
Code:
$web_string = "
<div class='product'>
<div class='image'>
<img class='image' src='iphone.jpg' alt='iPhone' height='100%' width='100%' />
</div>
<div class='under'>
<div class='info'>
<ul>
<li>iPhone</li>
<li>iOS</li>
<li>16 GB</li>
<li>Black & White</li>
</ul>
<a href='#'>more info...</a>
</div>
<div class='extra'>
<p>price: 588</p>
<button>put in cart!</button>
</div>
<div>
</div>";
CSS:
#wrapper{
width: 100%;
height:100%;
background-color: blue;
}
.product
{
float:left;
width:250px;
height:250px;
background-color:red;
}
.onder
{
height:50%;
}
.afbeelding
{
background-color: green;
}
.info
{
background-color:yellow;
float:left;
width:50%;
height:100%;
}
.extra
{
background-color: purple;
float:right;
width:50%;
height:100%;
}
PHP Loop:
<?
echo $web_string;
for($i = 0; $i < 4; $i++)
{
echo $web_string;
if($i == 2)
{
echo "Hello World";
}
}
?>
EDIT: Changed ID's to Classes
You're using CSS ID selector which can be used to point only ONE element. So the float property is applied only on the first one. Use class instead : <div class='product'> and then in your CSS : .product { float: left; }
Same thing for "image" and "under"
Here is a jfiddle fix:
link
Had to add float: left; on image and under ID too
#image {
float: left;
}
#under {
float: left;
}
Let me know if this is what you needed
I am working on a HTML table that is supposed to be viewed on 42" TV screens. On my computer screen it fills up the entire screen from side to side, however when I connect it to my 46" TV screen via an HDMI cable, the table in the screen doesn't fill up the screen, it is smaller and centralised in the middle of the screen and surrounded with the background colour. I assume this is CSS issue. How do I make the table fill up the entire screen, just like it does on my computer?
Please find attached my laptop screen shot:
and also my TV screen shot:
Find below a copy of the php table:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Create a Parralax Website using Stellar.js</title>
<!-- <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"> -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
// After 9 seconds click on
$(document).ready(function()
{
setTimeout(function(){ $("#one")[0].click()},8000);
setTimeout(function(){ $("#two")[0].click()},16000);
setTimeout(function(){ $("#three")[0].click()},24000);
setTimeout(function(){ $("#four")[0].click()},32000);
//setTimeout(function(){ $("#one")[0].click()},32000);
setTimeout(function(){window.location.reload();}, 40000)
})
</script>
<?php include ("class/flightScheduleClass.php");
$obj = new FSchedule;
?>
</head>
<body>
<!-- <img class="envatologo" src="images/envatologo.png"> -->
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
<div class="wrapper">
<!-- ###################################################### -->
<!-- ############### Arrivals ############################# -->
<img src='../FlightShedule2/images/arrivals.png' alt='Arrivals' style='float:left' align='middle' width='105' height='38'>
<?php
$obj->pushAWeekAHead();
$obj->getArrivals();
?>
</div>
<a class="button" id="one" data-slide="2" title=""></a>
</div><!--End Slide 1-->
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
<!-- ###################################################### -->
<!-- ############### Depatures ############################# -->
<img src='../FlightShedule2/images/depature.png' alt='Arrivals' style='float:left' align='middle' width='145' height='38'>
<div class="wrapper">
<?php
echo $obj->getDepatureShedules();
?>
</div>
<!-- <span class="slideno">Slide 2</span> -->
<a class="button" id="two" data-slide="3" title=""></a>
</div><!--End Slide 2-->
<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
<div class="wrapper">
<!-- ###################################################### -->
<!-- ############### Arrivals ############################# -->
<img src='../FlightShedule2/images/arrivals.png' alt='Arrivals' style='float:left' align='middle' width='105' height='38'>
<?php
// $obj->getShedules();
$obj->getArrivals();
?>
</div>
<!-- <span class="slideno">Slide 3</span> -->
<a class="button" id="three" data-slide="4" title=""></a>
</div><!--End Slide 3-->
<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0">
<!-- <span class="slideno">Slide 4</span> -->
<a class="button" id="four" data-slide="1" title=""></a>
<?php include 'adRotator.html'; ?>
<!-- <span class="parallaxbg">Your Advertisment here!</span> -->
</div><!--End Slide 4-->
</body>
</html>
And the CSS file affecting the table:
#charset "utf-8";
/* CSS Document */
#font-face {
font-family: 'BebasRegular';
src: url('font/BEBAS___-webfont.eot');
src: url('font/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
url('font/BEBAS___-webfont.woff') format('woff'),
url('font/BEBAS___-webfont.ttf') format('truetype'),
url('font/BEBAS___-webfont.svg#BebasRegular') format('svg');
font-weight: normal;
font-style: normal;
}
html,body{
font-family: 'BebasRegular';
width:100%;
height:100%;
margin:0;
padding:0;
}
.navigation{
position:fixed;
z-index:1;
top:20px;
}
.navigation li{
color:#333333;
display:block;
padding: 0 10px;
line-height:30px;
margin-bottom:2px;
font-weight:bold;
-webkit-transition: all .2s ease-in-out;
border-bottom:1px solid black;
text-align:left;
width:53px;
}
.navigation li:hover,.active{
font-size:25px;
cursor:pointer;
width:100px!important;
}
.envatologo{
position:fixed;
top:50%;
left:50%;
width:446px;
margin-top:-41px;
margin-left:-223px;
z-index:1;
}
.slide{
background-attachment: fixed;
width:100%;
height:100%;
position: relative;
box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}
.wrapper{
width:1300px;
height:200px;
margin:0 auto;
position:relative;
}
.slideno{
position:absolute;
bottom:0px;
left:0px;
font-size:100px;
font-weight:bold;
color:rgba(255,255,255,0.3);
}
.button{
display:block;
width:50px;
height:50px;
position:absolute;
bottom:0px;
left:50%;
background-color:#333333;
background-image:url(../images/arrow.png);
}
.button2{
display:block;
width:50px;
height:50px;
position:absolute;
bottom:0px;
left:50%;
background-color:#333333;
background-image:url(../images/arrow.png);
}
.button3{
display:block;
width:50px;
height:50px;
position:absolute;
bottom:0px;
left:50%;
background-color:#333333;
background-image:url(../images/arrow.png);
}
.button:hover{
background-color:#494949;
cursor:pointer;
}
/******************************
SLIDE 1
*******************************/
#slide1{
background-color:#080908;
}
/******************************
SLIDE 2
*******************************/
#slide2{
background-color:#080908;
}
#slide2 img:first-child{
padding-left:30px;
}
#slide2 img:nth-child(2){
position:absolute;
top:300px;
left:100px;
}
#slide2 img:nth-child(3){
position:absolute;
top:600px;
left:300px;
}
#slide2 img:nth-child(4){
position:absolute;
top:400px;
left:300px;
}
#slide2 img:nth-child(5){
position:absolute;
top:600px;
right:300px;
}
#slide2 img:nth-child(6){
position:absolute;
top:600px;
right:300px;
}
#slide2 img:nth-child(7){
position:absolute;
top:400px;
right:100px;
}
#slide2 img:nth-child(8){
position:absolute;
top:100px;
right:300px;
}
/******************************
SLIDE 3
*******************************/
#slide3{
background-color:#080908;
}
#slide3 img:first-child{
padding-left:5px;
}
#slide3 img:nth-child(2){
position:absolute;
top:100px;
left:100px;
}
#slide3 img:nth-child(3){
position:absolute;
top:150px;
left:300px;
}
#slide3 img:nth-child(4){
position:absolute;
top:450px;
left:300px;
}
#slide3 img:nth-child(5){
position:absolute;
top:200px;
right:300px;
}
#slide3 img:nth-child(6){
position:absolute;
top:100px;
right:300px;
}
/******************************
SLIDE 4
*******************************/
#slide4{
background-image:url();
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#slide4 .parallaxbg{
position:absolute;
right:40px;
top:40px;
font-size:28px;
color:rgba(51,51,51,0.3);
}
/*********** DATABASE STUFF BELOW ADDED BY VINCENT *******************/
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
color:#ffffff;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1.0em;
border:1px solid #060900;
padding:3px 7px 2px 7px;
background-color:#000000;
}
#customers th
{
font-size:1.5em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#050700;
color:#ffff00;
border-bottom: solid 0.15em red;
}
#customers tr.alt td
{
color:#FAF7F7;
background-color:#0B0B61;
}
/*********** Ad Rotator STUFF BELOW ADDED BY VINCENT *******************/
#slideshow-container
{
height:90px;
position:relative;
}
#slideshow-container img
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
#slideshow
{ position:absolute;
left:0;
top:0;
width:100%;
height:100%;
list-style:none;
}
#slideshow img
{
width:120px;
height:90px;
background-repeat:none;
background-position:top left;
position:absolute;
left:0;
top:0;
}
#slideshow
{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
#slideshow img
{
width:120px;
height:90px;
background-repeat:none;
background-position:top left;
position:absolute;
left:0;
top:0;
} /* adjust this for your images */
Looking forward to you reply.
Isn't that because of width:1300px; in your .wrapper?
Edit:
Sorry, I see you don't use it in your HTML (unless something is missing there).
I would create a new class
.full-width {
width:auto
}
and assign it to your HTML
<div class="wrapper full-width">
I have inserted jquery slide show in to my newly created real estate web site.
My real estate web site runs on 'Openrealty' platform which is php.
Here is a part of my Original jquery code.
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({'marginRight':'-20px'},300,function(){
$(this).animate({'opacity':'0.7'},700);
});
When I look at where the error comes from through 'Firebug', it shows as follows.
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate(,300,function(){
$(this).animate(,700);
});
Here you can clearly see that some parts of the original code does not renders by the browser. Such as {'marginRight':'-20px'}
As shown by firebug the error begins from " .animate(,300,function(){ " onwards.
I need to find a solution why this Jquery not works in my web site.
Source of this Jquery slide show : http://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/
Any feedback is highly welcomed...
Thanks for the first 2 answers and request.
Yes I removed all (') marks within all styling as per the answers.
But still the error occurs as same above...
Total Jquery script have three parts.
1. Link to http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
2. Link to outside JS file called 'jquery.easing.1.3.js'
3. Inline script
Following is the inline jquery:
<script type="text/javascript">
$(function() {
var current = 1;
var iterate = function(){
var i = parseInt(current+1);
var lis = $('#rotmenu').children('li').size();
if(i>lis) i = 1;
display($('#rotmenu li:nth-child('+i+')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate,3000);
$('#rotmenu li').bind('click',function(e){
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});
function display(elem){
var $this = elem;
var repeat = false;
if(current == parseInt($this.index() + 1))
repeat = true;
/* slide in the current one */
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({marginRight:-20px},300,function(){
$(this).animate({opacity:0.7},700);
});
current = parseInt($this.index() + 1);
var elem = $('a',$this);
elem.stop(true,true).animate({marginRight:0px,opacity:1.0},300);
var info_elem = elem.next();
$('#rot1 .heading').animate({left:-420px}, 500,'easeOutCirc',function(){
$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({left:0px},400,'easeInOutQuad');
});
$('#rot1 .description').animate({bottom:-270px},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_description').html());
$(this).animate({bottom:0px},400,'easeInOutQuad');
})
$('#rot1').prepend(
$('<img/>',{
style : 'opacity:0',
className : 'bg'
}).load(
function(){
$(this).animate({opacity:1},600);
$('#rot1 img:first').next().animate({opacity:0},700,function(){
$(this).remove();
});
}
).attr('src','slide-images/'+info_elem.find('.info_image').html()).attr('width','950').attr('height','300')
);
}
});
</script>
And following is the html part which shows the slide show.
<div id="sliderbox">
<div class="rotator">
<ul id="rotmenu">
<li>
Luxury Life
<div style="display:none;">
<div class="info_image">1.jpg</div>
<div class="info_heading">Best Homes for you</div>
<div class="info_description">
This is description...
Read more
</div>
</div>
</li>
<li>
Smiling Faces
<div style="display:none;">
<div class="info_image">2.jpg</div>
<div class="info_heading">Do at our best</div>
<div class="info_description">
This is description...
Read more
</div>
</div>
</li>
<li>
Tradition
<div style="display:none;">
<div class="info_image">3.jpg</div>
<div class="info_heading">We goes with tradition</div>
<div class="info_description">
This is description...
Read more
</div>
</div>
</li>
<li>
Lands for sale
<div style="display:none;">
<div class="info_image">4.jpg</div>
<div class="info_heading">A best place to live in Kandy</div>
<div class="info_description">
This is description...
Read more
</div>
</div>
</li>
<li>
True Nature
<div style="display:none;">
<div class="info_image">5.jpg</div>
<div class="info_heading">Brings you beauty in nature</div>
<div class="info_description">
This is description...
Read more
</div>
</div>
</li>
</ul>
<div id="rot1">
<img src="" width="950" height="300" class="bg" alt=""/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
and following is the CSS:
.rotator{
background-color:#222;
width:950px;
height:300px;
margin:0px auto;
position:relative;
/*font-family:'Myriad Pro',Arial,Helvetica,sans-serif;*/
font-family:Helvetica,sans-serif;
color:#fff;
text-transform:uppercase;
/* letter-spacing:-1px; */
letter-spacing:1px;
border:3px solid #f0f0f0;
overflow:hidden;
-moz-box-shadow:0px 0px 10px #222;
-webkit-box-shadow:0px 0px 10px #222;
box-shadow:0px 0px 10px #222;
}
img.bg{
position:absolute;
top:0px;
left:0px;
}
.rotator ul{
list-style:none;
position:absolute;
right:0px;
top:0px;
margin-top:6px;
z-index:999999;
}
.rotator ul li{
display:block;
float:left;
clear:both;
width:260px;
}
.rotator ul li a{
width:230px;
float:right;
clear:both;
padding-left:10px;
text-decoration:none;
display:block;
height:30px;
line-height:30px;
background-color:#222;
margin:1px -20px 1px 0px;
/*opacity:0.7;*/
color:#f0f0f0;
font-size:12px;
border:1px solid #000;
border-right:none;
outline:none;
/*
text-shadow:-1px 1px 1px #000;
*/
-moz-border-radius:10px 0px 0px 5px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
}
/* .rotator ul li a:hover{
text-shadow:0px 0px 2px #fff;
}
*/
.rotator .heading{
position:absolute;
top:0px;
left:0px;
width:500px;
}
.rotator .heading h1{
text-shadow:-1px 1px 1px #555;
font-weight:normal;
font-size:36px;
padding:20px;
}
.rotator .description{
width:300px;
height:15px;
position:absolute;
bottom:0px;
left:0px;
padding:5px;
background-color:#222;
-moz-border-radius:0px 10px 0px 0px;
-webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
/*opacity:0.7;*/
border-top:1px solid #000;
border-right:1px solid #000;
}
.rotator .description p{
/*text-shadow:-1px 1px 1px #000;*/
text-transform:none;
letter-spacing:normal;
line-height:10px;
font-family:Helvetica,sans-serif;
font-size:13px;
}
a.more{
color:orange;
text-decoration:none;
text-transform:uppercase;
font-size:10px;
}
a.more:hover{
color:#fff;
}
I have analysed every of these scripts but couldn't identified any issues...
Please tell me how I can solve this.
Try this in you original code.
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({marginRight:-20},300,function(){
$(this).animate({opacity:0.7},700);
});
Your CSS properties for the animate() function seem wrong.
Experiment without the ' (single quote characters)
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({marginRight:'-20px'},300,function(){
$(this).animate({opacity:0.7},700);
});
As in the animate() examples from the jquery webpage