Thema müsste heissen Java-Script Scrollmenü
Hallo zusammen,
ich habe zwar ein tutorial für mein Problem gefunden, jedoch funktioniert das ganze noch nicht, und deshalb hoffe ich, dass ihr mir helfen könnt.
Ich möchte quasi diese Funktion:
Create a Scrolling Menu: Result
und hab auch schritt für schritt das tutorial verfolgt.
Dennoch klappt es nicht wie ich es will:
Es scrollt nicht (geschweige, dass ich die Bilder nicht zentriert kriege)...
Ausserdem verweisst mich Dreamweaver, dass im allerletzten Code ein Fehler ist.
und zwar in der zeile:
Der gesammte html Code:
Der Java-Script Code:
Ich hoffe ihr könnt mir helfen...
MfG
GariZZo
Hallo zusammen,
ich habe zwar ein tutorial für mein Problem gefunden, jedoch funktioniert das ganze noch nicht, und deshalb hoffe ich, dass ihr mir helfen könnt.
Ich möchte quasi diese Funktion:
Create a Scrolling Menu: Result
und hab auch schritt für schritt das tutorial verfolgt.
Dennoch klappt es nicht wie ich es will:
Es scrollt nicht (geschweige, dass ich die Bilder nicht zentriert kriege)...
Ausserdem verweisst mich Dreamweaver, dass im allerletzten Code ein Fehler ist.
und zwar in der zeile:
Code:
var tooltip = $('<div class="sc_menu_tooltip"></div>')Der gesammte html Code:
Code:
<!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>Werbeagentur Vision First - Main // Hamburg, Germany</title>
<style type="text/css">
#Accordion1 .AccordionPanel .AccordionPanelTab strong {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #aaf000;
}
#Accordion2 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent table tr td {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
}
.table2 {
background-image: url(bilder/images/3.png);
background-repeat: no-repeat;
}
#Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent table tr td {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
text-align: right;
}
body p {
font-family: Arial, Helvetica, sans-serif;
}
body p {
font-size: 10px;
}
body p {
font-weight: bold;
}
body p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
body p {
font-family: Arial, Helvetica, sans-serif;
}
body p {
font-size: 12px;
}
body p {
font-size: 10px;
}
div.sc_menu_wrapper {
position: relative;
height: 250px;
/* Make bigger than a photo, because we need a place for a scroll-bar. */
width: 200px;
margin-top: 30px;
overflow: auto;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display:block;
margin-bottom: 1px;
width: 155px;
border: 2px rgb(79, 79, 79) solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
/* When image support is turned off */
color: #fd7b2d;
background: rgb(79, 79, 79);
}
.sc_menu a:hover {
border-color: rgb(253, 123, 45);
border-style:solid;
}
.sc_menu img {
display: block;
border: none;
}
/* 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);
}
.table3 {
background-image: url(bilder/images/iamges_input/images/content/page_slices_content_20.jpg);
background-repeat: no-repeat;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script src="film_stylesheet.js" type="text/javascript"></script>
</head>
<body onload="MM_preloadImages('bilder/images/iamges_input/images/buttons_06.png','bilder/images/iamges_input/images/buttons_08.png','bilder/images/iamges_input/images/buttons_10.png','bilder/images/iamges_input/images/buttons_12.png','bilder/images/iamges_input/images/content/page_slices_content_48.jpg','bilder/images/iamges_input/images/content/page_slices_content_50.jpg','bilder/images/iamges_input/images/content/page_slices_content_52.jpg')">
<div align="center">
<table width="1075" height="790" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="117" colspan="11"><img src="bilder/images/iamges_input/images/input_01.png" width="1075" height="117" /></td>
</tr>
<tr>
<td width="132" height="113" rowspan="3"><img src="bilder/images/iamges_input/images/input_02.png" width="132" height="113" /></td>
<td width="122" height="113" rowspan="3"><img src="bilder/images/iamges_input/images/input_03.png" width="122" height="113" /></td>
<td height="65" colspan="9"><img src="bilder/images/iamges_input/images/input_04.png" width="821" height="65" /></td>
</tr>
<tr>
<td width="328" height="48" rowspan="2"><img src="bilder/images/iamges_input/images/input_05.png" width="328" height="48" /></td>
<td width="34"><img src="bilder/images/iamges_input/images/buttons_06.png" width="34" height="17" /></td>
<td width="7"><img src="bilder/images/iamges_input/images/input_07.png" width="7" height="17" /></td>
<td width="113"><a href="kommunikation.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','bilder/images/iamges_input/images/buttons_08.png',1)"><img src="bilder/images/iamges_input/images/input_08.png" name="Image15" width="113" height="17" border="0" id="Image15" /></a></td>
<td width="8"><img src="bilder/images/iamges_input/images/input_09.png" width="8" height="17" /></td>
<td width="80" height="17"><a href="fotografie.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','bilder/images/iamges_input/images/buttons_10.png',1)"><img src="bilder/images/iamges_input/images/input_10.png" name="Image16" width="80" height="17" border="0" id="Image16" /></a></td>
<td width="8" height="17"><img src="bilder/images/iamges_input/images/input_11.png" width="8" height="17" /></td>
<td width="60" height="17"><a href="kontakt.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','bilder/images/iamges_input/images/buttons_12.png',1)"><img src="bilder/images/iamges_input/images/input_12.png" name="Image17" width="60" height="17" border="0" id="Image17" /></a></td>
<td width="183" height="48" rowspan="2"><img src="bilder/images/iamges_input/images/input_13.png" alt="" width="183" height="48" /></td>
</tr>
<tr>
<td height="31" colspan="7"><img src="bilder/images/iamges_input/images/content/page_slices_content_14.png" width="310" height="31" /></td>
</tr>
<tr>
<td height="298" colspan="11"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50" colspan="12"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1075" height="50"><img src="bilder/images/iamges_input/images/content/page_slices_content_15.jpg" width="1075" height="48" /></td>
</tr>
</table></td>
</tr>
<tr>
<td width="104" height="330" rowspan="5"> </td>
<td width="160" height="330" rowspan="5" class="table3"><div class="sc_menu_wrapper">
<div class="sc_menu">
<a title="Menu" href="#"><img src="bilder/1.jpg" alt="Menu"/ align="middle"></a>
<a title="Navigation" href="#"><img src="bilder/1.jpg" alt="Navigation"/></a>
<a title="jQuery" href="#"><img src="bilder/1.jpg" alt="jQuery"/></a>
<a title="CSS" href="#"><img src="bilder/1.jpg" alt="CSS"/></a>
<a title="Vertical" href="#"><img src="bilder/1.jpg" alt="Vertical"/></a>
<a title="Menu" href="#"><img src="bilder/1.jpg" alt="Menu"/></a>
<a title="Navigation" href="#"><img src="bilder/1.jpg" alt="Navigation"/></a>
</div>
</div>
</td>
<td width="58" rowspan="5"> </td>
<td width="154" height="86"> </td>
<td width="15" height="86"> </td>
<td width="154" height="86"> </td>
<td width="15" height="86"> </td>
<td width="154" height="86"> </td>
<td width="14" height="86"> </td>
<td width="154" height="88"> </td>
<td width="14"> </td>
<td width="79"> </td>
</tr>
<tr>
<td height="35" colspan="7"> </td>
<td width="14" height="35"> </td>
<td width="79" height="35"> </td>
</tr>
<tr>
<td width="154" height="86"> </td>
<td height="86"> </td>
<td width="154" height="86"> </td>
<td height="86"> </td>
<td height="86"> </td>
<td height="86"> </td>
<td width="154" height="86"> </td>
<td width="14" height="86"> </td>
<td width="79" height="86"> </td>
</tr>
<tr>
<td height="35" colspan="7"> </td>
<td width="14" height="35"> </td>
<td width="79" height="35"> </td>
</tr>
<tr>
<td width="154" height="86"> </td>
<td height="86"> </td>
<td height="86"> </td>
<td height="86"> </td>
<td height="86"> </td>
<td height="86"> </td>
<td width="154" height="86"> </td>
<td width="14" height="86"> </td>
<td width="79" height="86"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="116" colspan="11"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1075" height="116"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="322" height="116" rowspan="3"> </td>
<td height="16" colspan="4"> </td>
<td width="482" height="16"> </td>
<td width="46"> </td>
<td height="16"> </td>
</tr>
<tr>
<td width="42" height="26"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image19','','bilder/images/iamges_input/images/content/page_slices_content_48.jpg',1)"><img src="bilder/images/iamges_input/images/content/Film_buttons_48.jpg" name="Image19" width="42" height="26" border="0" id="Image19" /></a></td>
<td width="7" height="26"> </td>
<td width="92" height="26"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','bilder/images/iamges_input/images/content/page_slices_content_50.jpg',1)"><img src="bilder/images/iamges_input/images/content/Film_buttons_50.jpg" name="Image20" width="92" height="26" border="0" id="Image20" /></a></td>
<td width="7" height="26"> </td>
<td height="26" colspan="2"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','bilder/images/iamges_input/images/content/page_slices_content_52.jpg',1)"><img src="bilder/images/iamges_input/images/content/Film_buttons_52.jpg" name="Image21" width="53" height="26" border="0" id="Image21" /></a></td>
<td width="77"> </td>
</tr>
<tr>
<td height="71" colspan="7"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="65" colspan="11"><img src="bilder/images/iamges_input/images/input_17.png" width="1075" height="65" /></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>Der Java-Script Code:
Code:
// JavaScript Document
function makeScrollable(wrapper, scrollable){
}
$(function(){
makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
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'></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(){
}
}
function enable(){
// height of area at the top at bottom, that don't respond to mousemove
var inactiveMargin = 100;
// 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();
//When user move mouse over menu
wrapper.mousemove(function(e){
var wrapperOffset = wrapper.offset();
// Scroll menu
var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
wrapper.scrollTop(top);
});
}
function enable(){
// height of area at the top at bottom, that don't respond to mousemove
var inactiveMargin = 100;
// 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(){
// The "data" function attaches custom data to an element
$(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('');
});
}Ich hoffe ihr könnt mir helfen...
MfG
GariZZo
