Virusscanner tips?
Slide menu vast laten staan
dit is mijn eerste berichtje hier en hoop dat jullie me verder kunnen helpen bij een klein striptje,
Ik ben bezig met een advertentie/marktplaats website en op de home page wil ik een beknopte zoek funtie waarin je snel op de 3 belangrijkste waardes kun zoeken in de advertenties.
Maar omdat ik 3 te weinig vind en graag wil uitbereiden door 5 wil ik dit doormiddel van een uitklap window doen. Dus als je op een van de invul velden klikt dat het zo beknopte zoekfilter zich uitbereid met nog 2 in te kunnen vullen opties.
Een voorbeeld is de zoekfuntie op de home page van: www.trulia.com
nu heb ik dit script gedownload:
http://www.dhtmlgoodies.com/?whichScript=pulldown_content
Het probleem waar ik nu tegen aanloop is dat ik het in de extra zoek opties die in het uitklapscherm zetten dat deze ook een keuze menu bevat en zodra je dan op het puldown menutje klikt schuift direct het uiklapscherm zich weer..
Is er een mogelijkheid in dit script dat als je hem 1x uitgeklapt hebt dat die open blijft staan tot je bijvoorbeeld je pagina ververst?
dit staan boven in header:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<?php
<style type="text/css">
/* Start of css that is not needed for the script */
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin-top:0px;
background-image:url('../../images/heading3.gif');
background-repeat:no-repeat;
padding-top:0px;
}
p{
margin-top:0px;
}
a{
color:#660000;
text-decoration:none;
}
/* End of css that is not needed for the script */
/* Don't delete anything below here */
.dhtmlgoodies_contentBox{
height:0px;
visibility:hidden;
position:absolute;
overflow:hidden;
padding:2px;
width:250px;
}
.dhtmlgoodies_content{
position:relative;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
width:100%;
font-size:0.8em;
}
</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, September 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
See http://www.dhtmlgoodies.com/index.html?page=termsOfUse
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var slideDownInitHeight = new Array();
var slidedown_direction = new Array();
var slidedownActive = false;
var contentHeight = false;
var slidedownSpeed = 3; // Higher value = faster script
var slidedownTimer = 7; // Lower value = faster script
function slidedown_showHide(boxId)
{
if(!slidedown_direction[boxId])slidedown_direction[boxId] = 1;
if(!slideDownInitHeight[boxId])slideDownInitHeight[boxId] = 0;
if(slideDownInitHeight[boxId]==0)slidedown_direction[boxId]=slidedownSpeed; else slidedown_direction[boxId] = slidedownSpeed*-1;
slidedownContentBox = document.getElementById(boxId);
var subDivs = slidedownContentBox.getElementsByTagName('DIV');
for(var no=0;no<subDivs.length;no++){
if(subDivs[no].className=='dhtmlgoodies_content')slidedownContent = subDivs[no];
}
contentHeight = slidedownContent.offsetHeight;
slidedownContentBox.style.visibility='visible';
slidedownActive = true;
slidedown_showHide_start(slidedownContentBox,slidedownContent);
}
function slidedown_showHide_start(slidedownContentBox,slidedownContent)
{
if(!slidedownActive)return;
slideDownInitHeight[slidedownContentBox.id] = slideDownInitHeight[slidedownContentBox.id]/1 + slidedown_direction[slidedownContentBox.id];
if(slideDownInitHeight[slidedownContentBox.id] <= 1){
slidedownActive = false;
slidedownContentBox.style.visibility='hidden';
slideDownInitHeight[slidedownContentBox.id] = 0;
}
if(slideDownInitHeight[slidedownContentBox.id]>contentHeight){
slidedownActive = false;
}
slidedownContentBox.style.height = slideDownInitHeight[slidedownContentBox.id] + 'px';
slidedownContent.style.top = slideDownInitHeight[slidedownContentBox.id] - contentHeight + 'px';
setTimeout('slidedown_showHide_start(document.getElementById("' + slidedownContentBox.id + '"),document.getElementById("' + slidedownContent.id + '"))',slidedownTimer); // Choose a lower value than 10 to make the script move faster
}
function setSlideDownSpeed(newSpeed)
{
slidedownSpeed = newSpeed;
}
</script> ?>
<style type="text/css">
/* Start of css that is not needed for the script */
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin-top:0px;
background-image:url('../../images/heading3.gif');
background-repeat:no-repeat;
padding-top:0px;
}
p{
margin-top:0px;
}
a{
color:#660000;
text-decoration:none;
}
/* End of css that is not needed for the script */
/* Don't delete anything below here */
.dhtmlgoodies_contentBox{
height:0px;
visibility:hidden;
position:absolute;
overflow:hidden;
padding:2px;
width:250px;
}
.dhtmlgoodies_content{
position:relative;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
width:100%;
font-size:0.8em;
}
</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, September 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
See http://www.dhtmlgoodies.com/index.html?page=termsOfUse
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var slideDownInitHeight = new Array();
var slidedown_direction = new Array();
var slidedownActive = false;
var contentHeight = false;
var slidedownSpeed = 3; // Higher value = faster script
var slidedownTimer = 7; // Lower value = faster script
function slidedown_showHide(boxId)
{
if(!slidedown_direction[boxId])slidedown_direction[boxId] = 1;
if(!slideDownInitHeight[boxId])slideDownInitHeight[boxId] = 0;
if(slideDownInitHeight[boxId]==0)slidedown_direction[boxId]=slidedownSpeed; else slidedown_direction[boxId] = slidedownSpeed*-1;
slidedownContentBox = document.getElementById(boxId);
var subDivs = slidedownContentBox.getElementsByTagName('DIV');
for(var no=0;no<subDivs.length;no++){
if(subDivs[no].className=='dhtmlgoodies_content')slidedownContent = subDivs[no];
}
contentHeight = slidedownContent.offsetHeight;
slidedownContentBox.style.visibility='visible';
slidedownActive = true;
slidedown_showHide_start(slidedownContentBox,slidedownContent);
}
function slidedown_showHide_start(slidedownContentBox,slidedownContent)
{
if(!slidedownActive)return;
slideDownInitHeight[slidedownContentBox.id] = slideDownInitHeight[slidedownContentBox.id]/1 + slidedown_direction[slidedownContentBox.id];
if(slideDownInitHeight[slidedownContentBox.id] <= 1){
slidedownActive = false;
slidedownContentBox.style.visibility='hidden';
slideDownInitHeight[slidedownContentBox.id] = 0;
}
if(slideDownInitHeight[slidedownContentBox.id]>contentHeight){
slidedownActive = false;
}
slidedownContentBox.style.height = slideDownInitHeight[slidedownContentBox.id] + 'px';
slidedownContent.style.top = slideDownInitHeight[slidedownContentBox.id] - contentHeight + 'px';
setTimeout('slidedown_showHide_start(document.getElementById("' + slidedownContentBox.id + '"),document.getElementById("' + slidedownContent.id + '"))',slidedownTimer); // Choose a lower value than 10 to make the script move faster
}
function setSlideDownSpeed(newSpeed)
{
slidedownSpeed = newSpeed;
}
</script> ?>
dit staat op de plek waar ik dat uitklap menu heb:
Code (php)
1
2
3
2
3
<?php
<div id="dhtmlgoodies_control"><a href="#" onclick="slidedown_showHide('box1');return false;" form id="mainform" name="mainform" method="post" action="<?php echo WEBSITE_URL?>/ads/search.php"></div>
?>
<div id="dhtmlgoodies_control"><a href="#" onclick="slidedown_showHide('box1');return false;" form id="mainform" name="mainform" method="post" action="<?php echo WEBSITE_URL?>/ads/search.php"></div>
?>
en dit is het gene wat ik wil uit laten klappen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
<div>
<div class="dhtmlgoodies_contentBox" id="box1">
<div class="dhtmlgoodies_content" id="subBox1">
<p>
<select class="pricer select" name="rooms" value="<?php echo $sf_kamers?>
<option value=""></option>
<option value="0">Aantal Kamers</option>
<option value="1">1 + </option>
<option value="2">2 + </option>
<option value="3">3 + </option>
<option value="4">4 + </option>
<option value="5">5 + </option>
<option value="6">6 + </option>
<option value="7">7 + </option>
<option value="8">8 + </option>
<option value="9">9 + </option>
<option value="10">10+ </option>
</select>
</p>
<!-- End slide down content -->
</div>
</div>
?>
<div>
<div class="dhtmlgoodies_contentBox" id="box1">
<div class="dhtmlgoodies_content" id="subBox1">
<p>
<select class="pricer select" name="rooms" value="<?php echo $sf_kamers?>
<option value=""></option>
<option value="0">Aantal Kamers</option>
<option value="1">1 + </option>
<option value="2">2 + </option>
<option value="3">3 + </option>
<option value="4">4 + </option>
<option value="5">5 + </option>
<option value="6">6 + </option>
<option value="7">7 + </option>
<option value="8">8 + </option>
<option value="9">9 + </option>
<option value="10">10+ </option>
</select>
</p>
<!-- End slide down content -->
</div>
</div>
?>
Gewijzigd op 02/02/2014 22:22:27 door RobertJan Kempink
Vereiste als je HTML codes of SQL queries plaatst. Deze is te gebruiken in combinatie met <?php en ?> voor PHP highlighting.
<?php en ?> Automatische PHP highlighting
zie ook: http://www.phphulp.nl/veel-gestelde-vragen/#bbcode
Gewijzigd op 02/02/2014 22:16:38 door Frank Nietbelangrijk
bij deze aangepast... ik hoop dat het zo goed is?
Groeten!
kun je me misschien ook verder helpen met de vraag? :)
hier is gewoon javascript of jQuery ruim voldoende
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style> #hided-div { display:none; } </style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(e) { // wordt automatisch eenmalig aangeroepen als de pagina geladen is
$('.extend').focus(function(e) { // als de focus op n van de html elementen komt die een class="extend" heeft
$('#hided-div').show('slow'); // laat dan de verborgen div zien
});
$('#close-hided-div').click(function(e) { // als op het html element geklikt wordt met id="close-hided-div"
$('#hided-div').hide('fast'); // verberg de div
});
$('#keuze-select').change(function(e) { // als er een andere waarde in de selectbox gekozen wordt
$('#zoek').val( $('#keuze-select').val() ); // zet de gekozen waarde van de selectbox in de input
});
});
</script>
</head>
<body>
<input class="extend" type="text" id="zoek" name="zoek" />
<div id="hided-div">
<select id="keuze-select">
<option>keuze a</option>
<option selected="selected">keuze b</option>
</select>
<a href="#" id="close-hided-div">close</a>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style> #hided-div { display:none; } </style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(e) { // wordt automatisch eenmalig aangeroepen als de pagina geladen is
$('.extend').focus(function(e) { // als de focus op n van de html elementen komt die een class="extend" heeft
$('#hided-div').show('slow'); // laat dan de verborgen div zien
});
$('#close-hided-div').click(function(e) { // als op het html element geklikt wordt met id="close-hided-div"
$('#hided-div').hide('fast'); // verberg de div
});
$('#keuze-select').change(function(e) { // als er een andere waarde in de selectbox gekozen wordt
$('#zoek').val( $('#keuze-select').val() ); // zet de gekozen waarde van de selectbox in de input
});
});
</script>
</head>
<body>
<input class="extend" type="text" id="zoek" name="zoek" />
<div id="hided-div">
<select id="keuze-select">
<option>keuze a</option>
<option selected="selected">keuze b</option>
</select>
<a href="#" id="close-hided-div">close</a>
</div>
</body>
</html>
ik heb je script geprobeerd maar krijg ook deze met geen mogelijkheid aan de praat :(
heb hem geprobeerd in mijn pagina te zetten maar vervolgens brengt die heel me layout om zeep :S
Gewijzigd op 03/02/2014 10:54:53 door RobertJan Kempink