Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien

JQUERY div vast zetten

Pagina: 1
Acties:
  • 195 views

  • Bassiee
  • Registratie: November 2010
  • Laatst online: 12-03-2012
Beste dames en heren,


Ben sinds kort bezig met een website,

Alleen loop elke keer tegen een probleem aan.

IK heb een div met nivo slider die me afbeeldingen verandert elke keer er zit ook een div bij om tekst in te zetten.

Alleen ik wil dat me afbeelding verandert en niet me tekst.


BRON :

<!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>DIAMOND-DRIVERS 2009/2010</title>
<!-- CSS Files -->
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/diamonddrivers.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen" />

<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />


<style type="text/css">
.sf-sub-indicator {behavior: url(css/iepngfix.htc)};
.style1
{
width: 120px;
height: 165px;
}
</style>
<!-- End of CSS Files -->


<!-- Javascript Files -->

<script type="text/javascript" src="javascript/jquery.cycle.all.js"></script>
<script type="text/javascript" src="javascript/superfish.js"></script>
<script type="text/javascript" src="javascript/dd.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="javascript/jquery.nivo.slider.pack.js" type="text/javascript"></script>


<script type="text/javascript">
$(window).load(function () {
$('#slider').nivoSlider({
effect: 'fade', //Specify sets like: 'fold,fade,sliceDown'
slices: 4,
animSpeed: 500, //Slide transition speed
pauseTime: 7000,
startSlide: 0, //Set starting Slide (0 index)
directionNav: false, //Next & Prev
directionNavHide: false, //Only show on hover
controlNav: false, //1,2,3...
controlNavThumbs: false, //Use thumbnails for Control Nav
controlNavThumbsFromRel: false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav: false, //Use left & right arrows
pauseOnHover: false, //Stop animation while hovering
manualAdvance: false, //Force manual transitions
captionOpacity: 0.7, //Universal caption opacity
beforeChange: function () { },
afterChange: function () { },
slideshowEnd: function () { }, //Triggers after all slides have been shown
lastSlide: function () { }, //Triggers when last slide is shown
afterLoad: function () { } //Triggers when slider has loaded
});
});
</script>

<!-- End of Javascript Files -->


</head>


<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Top bar -->
<div id="topbar">
<!-- Logo -->

<!-- Menu -->
<div id="secnav">
<img id='Img1' class="logo" src="images/logo.png" alt="logo" />
</div>
<div class="menu">
<ul class="sf-menu">
<li> <a class="on" href="index.php">HOME</a></li>
<li> <a href="diensten.php">DIENSTEN</a> </li>
<li> <a href="offerte.php">OFFERTE AANVRAAG</a> </li>
<li> <a href="contact.php">CONTACT</a> </li>
<li> <a href="vacature.php">VACATURE</a> </li>
</ul>
</div>
<!-- End of Menu -->
</div>
<!-- End of Topbar -->
<!-- Featured item -->
<!-- End of Featured item -->
<!-- Category -->

<!-- End of Category -->
<!-- content -->


<!-- Slider -->
<div id="content">


<!-- begin of sidebar -->

<div id="sidebar">
<img src="images/sidebar-logo.png" alt="" />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>

<!-- end of sidebar -->
<div id="slider">

<img src="img/1.jpg" alt="" title="
Diamond VIP Drivers staat voor discretie en de hoogstaande kwaliteit van haar dienstverlening.<br /> 24 uur per dag 7 dagen in de week staan wij klaar voor onze klanten.<br /><br />
Onze privé chauffeurs zijn gescreend, representatieve en zijn ccvd-1 gecertificeerd om volledig aan uw wensen te kunnen voldoen. <br />
Onze privé chauffeurs worden geselecteerd op een aantal randvoorwaarden, zo zijn flexibiliteit, aanpassingsvermogen en klantvriendelijkheid van groot belang. <br />
Want wanneer in uw planning onverwachte situaties zich voordoen, regelen wij het.<br />
Al onze opdrachten worden vooraf door onze planning samen met de privé chauffeur doorgenomen. <br /> Op deze wijze hoeft u zich niet te bekommeren of u op tijd op uw afspraak komt en kunt u rustig de afspraak voorbereiden. Want wij zijn er voor u.
Onze klanten waarderen Diamond VIP Drivers, omdat wij luisteren naar uw wensen en deze perfect uitvoeren.<br />
Laat u rijden door een privé chauffeur van Diamond VIP Drivers,<br />
zodat u zich op een zeer efficiënte en comfortabele manier kunt laten vervoeren en uw kostbare tijd goed kunt besteden. " />
<img src="img/2.jpg" alt="" title="
Diamond VIP Drivers staat voor discretie en de hoogstaande kwaliteit van haar dienstverlening.<br /> 24 uur per dag 7 dagen in de week staan wij klaar voor onze klanten.<br /><br />
Onze privé chauffeurs zijn gescreend, representatieve en zijn ccvd-1 gecertificeerd om volledig aan uw wensen te kunnen voldoen. <br />
Onze privé chauffeurs worden geselecteerd op een aantal randvoorwaarden, zo zijn flexibiliteit, aanpassingsvermogen en klantvriendelijkheid van groot belang. <br />
Want wanneer in uw planning onverwachte situaties zich voordoen, regelen wij het.<br />
Al onze opdrachten worden vooraf door onze planning samen met de privé chauffeur doorgenomen. <br /> Op deze wijze hoeft u zich niet te bekommeren of u op tijd op uw afspraak komt en kunt u rustig de afspraak voorbereiden. Want wij zijn er voor u.
Onze klanten waarderen Diamond VIP Drivers, omdat wij luisteren naar uw wensen en deze perfect uitvoeren.<br />
Laat u rijden door een privé chauffeur van Diamond VIP Drivers,<br />
zodat u zich op een zeer efficiënte en comfortabele manier kunt laten vervoeren en uw kostbare tijd goed kunt besteden. " />
<img src="img/3.jpg" alt="" title="
Diamond VIP Drivers staat voor discretie en de hoogstaande kwaliteit van haar dienstverlening.<br /> 24 uur per dag 7 dagen in de week staan wij klaar voor onze klanten.<br /><br />
Onze privé chauffeurs zijn gescreend, representatieve en zijn ccvd-1 gecertificeerd om volledig aan uw wensen te kunnen voldoen. <br />
Onze privé chauffeurs worden geselecteerd op een aantal randvoorwaarden, zo zijn flexibiliteit, aanpassingsvermogen en klantvriendelijkheid van groot belang. <br />
Want wanneer in uw planning onverwachte situaties zich voordoen, regelen wij het.<br />
Al onze opdrachten worden vooraf door onze planning samen met de privé chauffeur doorgenomen. <br /> Op deze wijze hoeft u zich niet te bekommeren of u op tijd op uw afspraak komt en kunt u rustig de afspraak voorbereiden. Want wij zijn er voor u.
Onze klanten waarderen Diamond VIP Drivers, omdat wij luisteren naar uw wensen en deze perfect uitvoeren.<br />
Laat u rijden door een privé chauffeur van Diamond VIP Drivers,<br />
zodat u zich op een zeer efficiënte en comfortabele manier kunt laten vervoeren en uw kostbare tijd goed kunt besteden. " />
<img src="img/5.jpg" alt="" title="
Diamond VIP Drivers staat voor discretie en de hoogstaande kwaliteit van haar dienstverlening.<br /> 24 uur per dag 7 dagen in de week staan wij klaar voor onze klanten.<br /><br />
Onze privé chauffeurs zijn gescreend, representatieve en zijn ccvd-1 gecertificeerd om volledig aan uw wensen te kunnen voldoen. <br />
Onze privé chauffeurs worden geselecteerd op een aantal randvoorwaarden, zo zijn flexibiliteit, aanpassingsvermogen en klantvriendelijkheid van groot belang. <br />
Want wanneer in uw planning onverwachte situaties zich voordoen, regelen wij het.<br />
Al onze opdrachten worden vooraf door onze planning samen met de privé chauffeur doorgenomen. <br /> Op deze wijze hoeft u zich niet te bekommeren of u op tijd op uw afspraak komt en kunt u rustig de afspraak voorbereiden. Want wij zijn er voor u.
Onze klanten waarderen Diamond VIP Drivers, omdat wij luisteren naar uw wensen en deze perfect uitvoeren.<br />
Laat u rijden door een privé chauffeur van Diamond VIP Drivers,<br />
zodat u zich op een zeer efficiënte en comfortabele manier kunt laten vervoeren en uw kostbare tijd goed kunt besteden. " />


</div>


<!-- End of Slider-->

</div>
<!-- End of blog-->


<!-- Footer-->
<div id="footer">
<div class="info"> © 2009 / 2010 Daimond drivers Alle rechten voorbehouden.</div>

</div>
<!-- End of footer-->
</div>
<!-- End of wrapper -->
</body>
</html>


CSS :

/*
* jQuery Nivo Slider v2.2
* http://nivo.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/


/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* 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:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width: 750px;
z-index:10000000000000000000000000000000;

}
.nivo-caption p {
padding:5px;
margin:0;
color: #ffffff;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}


Het gaat om de domein www.diamond-drivers.nl/demo 8)7 8)7

  • Schonhose
  • Registratie: April 2000
  • Laatst online: 21:09

Schonhose

Retro Icoon

Ik snap het probleem niet helemaal. De tekst is nu overal gelijk, alleen het plaatje veranderd. Het enige waar je mee kan zitten is dat het even opnieuw geladen wordt, wat overigens logisch is in de setup die je nu gebruikt.

Waarom dat gewoon niet gebruiken en een div over de foto heenleggen die altijd blijft bestaan? Wat ik dus bedoel is dat je de caption optie niet gaat misbruiken, maar gewoon zelf een div over de foto positioneert.

Overigens zouden codetags om je code + het terugbrengen naar relevante stukken code je post een stuk overzichtiger maken. Sterker nog, om deze suggestie te maken had ik niet eens de code en CSS nodig. ;)

[ Voor 33% gewijzigd door Schonhose op 26-11-2010 12:05 ]

"The thing under my bed waiting to grab my ankle isn't real. I know that, and I also know that if I'm careful to keep my foot under the covers, it will never be able to grab my ankle." - Stephen King
Quinta: 3 januari 2005


  • Bassiee
  • Registratie: November 2010
  • Laatst online: 12-03-2012
Schonhose schreef op vrijdag 26 november 2010 @ 12:03:
Ik snap het probleem niet helemaal. De tekst is nu overal gelijk, alleen het plaatje veranderd. Het enige waar je mee kan zitten is dat het even opnieuw geladen wordt, wat overigens logisch is in de setup die je nu gebruikt.

Waarom dat gewoon niet gebruiken en een div over de foto heenleggen die altijd blijft bestaan?
Sorry me uitleg was even niet duidelijk,

De foto gaat idd veranderen alleen krijg me tekst niet vast laad even opnieuw mee en dat is de punt die ik alleen vast wil zetten.

Alleen kom er hoe dan maar ook niet uit

  • Schonhose
  • Registratie: April 2000
  • Laatst online: 21:09

Schonhose

Retro Icoon

Ja, de enige manier die ik dan zie is dat je een div (al dan niet met jquery) positioneert over de foto en deze gewoon constant houdt.

Even voor de duidelijkheid, zodat je weet wat er gebeurd: de jQuery plugin voegt zelf HTML toe binnen de <div id="slider">. Deze HTML bevat ook de code voor de caption.

Tenzij (en dat weet ik dus niet) elke keer de volledige HTML van <div id="slider"> wordt vervangen kun je hier ook elementen zelf hard inzetten. Door met bijv. Firebug te kijken wat er geinjecteerd wordt (of in het script zelf) kun je het stukje wat verantwoordelijk is voor de tekst er zelf hard inzetten in deze div.

"The thing under my bed waiting to grab my ankle isn't real. I know that, and I also know that if I'm careful to keep my foot under the covers, it will never be able to grab my ankle." - Stephen King
Quinta: 3 januari 2005


  • Bassiee
  • Registratie: November 2010
  • Laatst online: 12-03-2012
Ik zal het even proberen in ieder geval hartelijk bedankt voor de moeite

  • NMe
  • Registratie: Februari 2004
  • Laatst online: 20-11 11:59

NMe

Quia Ego Sic Dico.

"Ik heb een probleem." *lap grotendeels irrelevante code*

Zo werkt het niet he? ;) We willen je best helpen, maar we verwachten op GoT wel dat je zelf even wat moeite doet voor je topic. In dit geval hadden we in je topicstart graag gezien wat je zelf al geprobeerd had en wat daaraan niet werkte, of op zijn minst een betere omschrijving van wat je eigenlijk wil bereiken. Daarnaast hebben we er niet zoveel aan als je al je code post. Alleen het relevante stukje was meer dan genoeg geweest. ;)

Mocht je er met de hulp van Schonhose nog niet uit komen, dan mag je best een nieuw topic openen. Ik zou het dan wel fijn vinden als je eerst de volgende dingen even doorleest:
De Quickstart
Webdesign, Markup & Clientside Scripting Beleid
Hoe post je code? / Hoe gebruik je de code tag?

Succes. :)

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

Pagina: 1

Dit topic is gesloten.