This topic has 5 replies, 2 voices, and was last updated 10 years, 2 months ago ago by Eva Kemp
Dear makers of the leader theme,
We made a website with your great theme and we would like to offer our customers a easy use of our website. Therefore we are designing a extra search option on our home page, which users can use to find their product. However, everything is working, but untill now i was not able to change the design of it. I made this: http://www.autoschluessel-online.de/test/
The code for this is here:
<!-- The first select list -->
<h5>Ihr Automarke:<h5><select name="slist1" class="slist1" onchange="SList.getSelect('slist2', this.value);">
<option>- - -</option>
<option value="Alfa">Alfa Romeo</option>
<option value="Aprilia">Aprilia</option>
<option value="Audi">Audi</option>
<option value="BWM">BMW</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroën</option>
<option value="Daewoo">Deawoo</option>
<option value="Ductai">Ductai</option>
<option value="Eagle Vision">Eagle Vision</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="Holden">Holden</option>
<option value="Honda">Honda</option>
<option value="HondaM">Honda Montorrad</option>
<option value="Hyundai">Hyundai</option>
<option value="Inviniti">Inviniti</option>
<option value="Isuzu">Isuzu</option>
<option value="Iveco">Iveco</option>
<option value="Jaguar">Jaguar</option>
<option value="Jeep">Jeep</option>
<option value="Kawasaki">Kawasaki</option>
<option value="Kia">Kia</option>
<option value="Lancia">Lancia</option>
<option value="Land">Land Rover</option>
<option value="Lexus">Lexus</option>
<option value="Mazda">Mazda</option>
<option value="MercedusB">Mercedus Benz</option>
<option value="MercedusT">Mercedus Trucks</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Nissan">Nissan</option>
<option value="Peugeot">Peugeot</option>
<option value="Renault">Renault</option>
<option value="RenaultD">Renault Dacia</option>
<option value="Rover">Rover</option>
<option value="Saab">Saab</option>
<option value="Scania">Scania</option>
<option value="Seat">Seat</option>
<option value="Skoda">Skoda</option>
<option value="Subaru">Subaru</option>
<option value="Suzuki">Suzuki</option>
<option value="Toyota">Toyota</option>
<option value="VW">VW</option>
<option value="Volvo">Volvo</option>
<option value="MercedusT">Mercedus Trucks</option>
</select>
<!-- Tags for the seccond dropdown list, and for text-content -->
<span id="slist2"></span> <div id="scontent"></div>
<script><!--
/* Script Double Select Dropdown List, from: coursesweb.net/javascript/ */
var SList = new Object(); // JS object that stores data for options
// HERE replace the value with the text you want to be displayed near Select
var txtsl2 = '<h5>Ihr Modell:<h5>';
/*
Property with options for the Seccond select list
The key in this object must be the same with the values of the options added in the first select
The values in the array associated to each key represent options of the seccond select
*/
SList.slist2 = {
"Alfa": ['145', '146', '155','156', '156 Sportwagen', '164', '166', 'Spider','Gulietta', 'Mito'],
"coursesweb": ['php-mysql', 'javascript', 'flash-as3']
};
/*
Property with text-content associated with the options of the 2nd select list
The key in this object must be the same with the values (options) added in each Array in "slist2" above
The values of each key represent the content displayed after the user selects an option in 2nd dropdown list
*/
SList.scontent = {
"145": '<br> <button type="button" onclick=location="http://www.autoschluessel-online.de/produktkategorie/alfa-romeo/145/">Jetzt suche</button> ',
"146": '<br> <button type="button" onclick=location="http://www.autoschluessel-online.de/produktkategorie/alfa-romeo/146/">CJetzt suche</button> ',
"145": '<br> <button type="button" onclick=location="http://www.autoschluessel-online.de/produktkategorie/alfa-romeo/155/">Jetzt suche</button> ',
};
/* From here no need to modify */
// function to get the dropdown list, or content
SList.getSelect = function(slist, option) {
document.getElementById('scontent').innerHTML = ''; // empty option-content
if(SList[slist][option]) {
// if option from the last Select, add text-content, else, set dropdown list
if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
else if(slist == 'slist2') {
var addata = '<option>- - -</option>';
for(var i=0; i<SList[slist][option].length; i++) {
addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
}
document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
}
}
else if(slist == 'slist2') {
// empty the tag for 2nd select list
document.getElementById('slist2').innerHTML = '';
}
}
--></script>
Is it possible to use a CSS code or something to change the design? We want them to be full width (from the left to the right of the page)?
Hello,
Do you wish the drop down list to be full width?
If so please add this code in custom.css file:
.slist1 {
width: 1000px !important;
}
Thank you.
Regards,
Eva Kemp.
Hello Eva,
This worked, but i do not have the desired results. It is possible to adjust to class in a responsive class, that it will adjust the width of the box untill to max. possible screen width. Now it is on my computer not full width (only 3/4) and on my hand it is really large.
It would be perfect if this one could be made responsive to the max. width of the screen.
Thnx for your work!!
Ok got the solution. It had to be:
.slist1 {
width: 100% !important;
}
Still thanks for your help
Hello,
You’re welcome.
We’re glad you’ve found the solution.
Regards,
Eva Kemp.
The issue related to '‘Double drop list problem’' has been successfully resolved, and the topic is now closed for further responses