Wordpress site, creating preloader for content div using Jquery and CSS, I found simple and great one here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
//A page can't be manipulated safely until the document is "ready."
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("content").style.display = "block";
}
});
</script>
<style type="text/css">
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#content {
display: none;
}
</style>
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div id="content" class="site-content container clear">
Preload this text.
</div>
And the error is:
myFunction is not defined at onload ((index):420)
Is there a workaround for WordPress or maybe other, simple way of adding preloader for particular div id?
you have to load the javascript in the header of the page, using the wordpress action wp_head. stick this in your child-themes functions.php:
function my_scripts() {
?>
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("content").style.display = "block";
}
});
</script>
<?php
}
add_action('wp_head', 'my_scripts');
edit: just to clear up - you don't have to load all javascript in the header, but the error you got is because you call the function before it's being defined. hence, it should work if you stick the function in between the head tags.
I think there is a better way to use jQuery with WordPress:
<script type="text/javascript">
jQuery.noConflict()(function($){
"use strict";
$(document).ready(function() {
//A page can't be manipulated safely until the document is "ready."
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
$("#loader").hide();
$("#content").show();
}
});
});
</script>
Related
So I downloaded a wordpress theme today, to be met with the fact that the navbar doesn't seem to change to white on mobile scrolling down only on desktop (Site URL www.genzoid.com) I've been trying tirelessly for hours to try to fix this issue. Could anyone help? This is the code in my header.js
;(function($){
$(document).scroll(function(){
if ($(this).scrollTop() > 50) {
$('.navbar').removeClass('navbar-dark');
$('.navbar').addClass('navbar-light');
$('.navbar').removeClass('bg-transparent');
$('.navbar').addClass('bg-white');
$('.site-title').addClass('text-dark');
$('.navbar .cta.btn-outline-success').addClass('text-dark');
$('.navbar').addClass('border-bottom');
} else {
$('.navbar').removeClass('navbar-light');
$('.navbar').addClass('navbar-dark');
$('.navbar').removeClass('bg-white');
$('.navbar').addClass('bg-transparent');
$('.site-title').removeClass('text-dark');
$('.navbar .cta.btn-outline-success').removeClass('text-dark');
$('.navbar').removeClass('border-bottom');
}
});
})(jQuery);
I hope this example I created helps.
$(function() {
$(document).scroll(function(event){
var st = $(this).scrollTop();
if (st > 50){
$('#navbar').addClass('navbar-dark');
} else {
$('#navbar').removeClass('navbar-dark');
}
});
});
html, body {
margin: 0;
}
body {
height: 2000px;
}
.navbar {
background-color: red;
padding: 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.navbar.navbar-dark {
background-color: black;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar" class="navbar">My navbar</div>
Through PHP the steps are counted and added in a session to avoid returning to the beginning in case of updating or refreshing the page, the value is obtained by means of the following variable $step
<?php
session_start();
if ( !empty($_SESSION['datos_form']['__step__'])) {
$step = $_SESSION['datos_form']['__step__'];
} else {
$step = '1';
}
?>
We receive the value of the variable in the jQuery javascript code.
show_step(<?= $step; ?>);
That would be equal to: (for the default value received)
show_step(1);
Each step of the process is shown according to the value received from PHP to the Javascript code as it was already mentioned.
Without the need to add additional controls like the following:
current = $(this).parent();
next = $(this).parent().next();
I have the following simple wizard with CSS
https://jsfiddle.net/2LL8x1sm/
I need to be able to adapt it to the ajax javascript code so that it animates the step in which it is.
The current code already had an animation using a technique called sprite
function animacion(caso){}
What I need is to be able to adapt the animation of the process, and using an icon (like this one) that goes sliding with the bar of progress similar to the following image:
This animation must be added inside the function animacion(caso) {} that works together with the back links and continue, add an example within the fuction in the following code:
$( ".test" ).animate({ "left": "-=50px" }, "slow" );
And in effect it works, the div with the test class was modifying the left style by continuing in each step.
How can I animate the process of my html code css?
$(function() {
show_step(<?= $step; ?>);
});
function animacion(caso){
//$( ".test" ).animate({ "left": "-=50px" }, "slow" );
};
// function to save the form data and change the step
function show_step(step){
var data = $( "#form" ).serialize();
var url = 'saveTemp.php?step=' + step;
$.ajax({
type: "POST",
url: url,
data: data
})
.done(function( resp ) {
$('.step').css( "display", "none" );
$('#step'+step).fadeIn("slow");
//animation of each step
animacion(step);
});
};
.container {
width: 100%;
padding-top: 20px;
}
.progressbar li {
list-style-type: none;
float: left;
width: 33.33%;
position: relative;
text-align: center;
}
.progressbar li > * {
position: relative;
padding-bottom: 20px;
display: inline-block;
font-size: 1.4rem;
color: #2c3f4c;
top: -45px;
}
.progressbar li:before {
content: '';
width: 12px;
height: 12px;
display: block;
text-align: center;
margin: 0 auto;
border-radius: 50%;
background-color: #edeff0;
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: #edeff0;
top: 4px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
background-color: green;
}
.progressbar li.active + li:after {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <div class="test"></div> -->
<div class="container">
<ul class="progressbar">
<li class="active"><span>Step 1</span></li>
<li><span>Step 2</span></li>
<li><span>Step 3</span></li>
</ul>
</div>
<form id="form" action="procesar.php">
<div id="step1" class="step">
<h1>step 1</h1>
<a data-ref="#" onclick="show_step(2)">continue</a>
</div>
<div id="step2" class="step">
<h1>step 2</h1>
<a data-ref="#" onclick="show_step(1)">after</a>
<a data-ref="#" onclick="show_step(3)">continue</a>
</div>
<div id="step3" class="step">
<h1>step 3</h1>
<a data-ref="#" onclick="show_step(2)">after</a>
<button>Send</button>
</div>
</form>
Is this correct understanding of what you need?
function animacion(caso) {
if (!caso) {
document.getElementsByClassName("progressbar")[0].setAttribute("data-active", "");
} else {
document.getElementsByClassName("progressbar")[0].setAttribute("data-active", caso);
}
var items = document.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (!caso) {
item.className = "";
} else if (i < caso) {
item.className = "active";
} else {
item.className = "";
}
}
}
setTimeout(function () {
animacion(1);
}, 1000);
setTimeout(function () {
animacion(2);
}, 2000);
setTimeout(function () {
animacion(3);
}, 3000);
setTimeout(function () {
animacion(2);
}, 4000);
setTimeout(function () {
animacion(1);
}, 5000);
setTimeout(function () {
animacion(null);
}, 6000);
.container {
width: 100%;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
float: left;
width: 33.33%;
position: relative;
text-align: center;
}
.progressbar li > * {
position: relative;
padding-bottom: 20px;
display: inline-block;
font-size: 1.4rem;
color: #2c3f4c;
top: -45px;
/* new code start */
top: -65px;
/* new code end */
}
.progressbar li:before {
content: '';
width: 12px;
height: 12px;
display: block;
text-align: center;
margin: 0 auto;
border-radius: 50%;
background-color: #edeff0;
}
.progressbar li:after {
content: '';
position: absolute;
width: 100%;
height: 4px;
background-color: #edeff0;
top: 4px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
background-color: green;
/* new code start */
-webkit-transition: background 300ms ease;
transition: background 300ms ease;
-webkit-transition-delay: 300ms;
transition-delay: 300ms;
/* new code end */
}
/* removed code start */
/*
.progressbar li.active + li:after {
background-color: green;
}
*/
/* removed code end */
/* new code start */
.progressbar {
position: relative;
padding: 0;
margin: 0;
}
.progressbar:after {
content: "";
height: 4px;
left: 16.666%;
background: green;
top: 4px;
position: absolute;
-webkit-transition: width 300ms ease;
transition: width 300ms ease;
}
.progressbar[data-active="1"]:after {
width: 0;
}
.progressbar[data-active="2"]:after {
width: 33%;
}
.progressbar[data-active="3"]:after {
width: 66%;
}
.progressbar[data-active=""]:before {
opacity: 0;
}
.progressbar:not([data-active=""]):before {
opacity: 1;
-webkit-transition: left 300ms ease, opacity 300ms ease;
transition: left 300ms ease, opacity 300ms ease;
}
.progressbar[data-active="1"]:before {
left: 16.666%;
}
.progressbar[data-active="2"]:before {
left: 50%;
}
.progressbar[data-active="3"]:before {
left: 83.333%;
}
.progressbar:before {
content: "";
height: 16px;
width: 16px;
margin-top: -24px;
margin-left: -8px;
left: 16.666%;
background: khaki;
top: 4px;
position: absolute;
-webkit-transition: left 300ms ease;
transition: left 300ms ease;
}
/* new code end */
<div class="container">
<br><br><br><br><br><br>
<ul class="progressbar" data-active="">
<li><span>Step 1</span></li>
<li><span>Step 2</span></li>
<li><span>Step 3</span></li>
</ul>
</div>
There is minor change in markup and style. Rectange indicates block where you can insert your icons.
I wonder if you can, how to call up a page for example test.php, so that it opens in a div and not in the new page, thank you.
<!DOCTYPE html PUBLIC ">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu</title>
<script type="text/javascript">
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
<style type="text/css">
#leftcolumn{
float:left;
width:150px;
height: 400px;
border: 3px solid black;
padding: 5px;
padding-left: 8px;
}
#leftcolumn a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray;
}
#leftcolumn a:hover{
background-color: #FFFF80;
}
#rightcolumn{
float:left;
width:550px;
min-height: 400px;
border: 3px solid black;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
}
* html #rightcolumn{ /*IE only style*/
height: 400px;
}
</style>
</head>
<body>
<div id="leftcolumn">
Menu
Google
<div style="margin-top: 2em">Load CSS & JS files</div>
Load "style.css" and "tooltip.js"
</div>
<div id="rightcolumn"><h3>Choose a page to load.</h3></div>
<div style="clear: left; margin-bottom: 1em"></div>
</body>
</html>
In this way, if menu.php recall works and I view the page on the local server, but if you call the page with google, does not open.
Menu
<div id="rightcolumn"></div>
<script>
$(document).ready(function(){
$("#menu").click(function(){
$("#rightcolumn").load("http://localhost/player/menu.php");
});
});
</script>
You can do like this...and so on for all elements...
I am trying to implement Rotate3Di, found here: http://www.zachstronaut.com/projects/rotate3di/
I can get my images to flip, but the back side is only showing a mirror image of the front and not unique content that I am pulling from a database. Thanks for any help in advance.
<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready(function () {
$('#movienav li div.back').hide().css('left', 0);
function mySideChange(front) {
if (front) {
$(this).parent().find('div.front').show();
$(this).parent().find('div.back').hide();
} else {
$(this).parent().find('div.front').hide();
$(this).parent().find('div.back').show();
}
}
$('#movienav li').hover(
function () {
$(this).find('div').stop().rotate3Di('flip', 180, 1000, {direction: 'clockwise', sideChange: mySideChange});
},
function () {
$(this).find('div').stop().rotate3Di('unflip', 1000, {sideChange: mySideChange});
}
);
});
</script>
HTML
<div id="movienav">
<ul>
<li><div class="front"><img src="<?php echo $imglink; ?>" width="340" height="450" class="dvdcover" /></div>
<div class="back">
<?php echo $description; ?>
</div>
</li>
</ul>
</div>
CSS
#movienav {
height: 450px;
width:75%;
float:left;
margin-top:25px;
clear:left;
padding-bottom: 45px;
}
#movienav li {
width: 340px;
height: 450px;
float: left;
margin-right: 10px;
position: relative;
display:inline;
list-style:none;
}
#movienav li div {
width: 340px;
height: 450px;
overflow: hidden;
background: #161616;
position: absolute;
top: 0;
left: 0;
}
#movienav li div.back {
left: -999em;
padding-bottom: 15px;
background-color:#161616; /*max-height:450px; overflow:auto;*/
margin-top: 0;
}
SOLVED
Changed above lines to:
$('#movienav li').hover(
function () {
$(this).find('div').stop().rotate3Di('180', 400, {direction: 'clockwise', sideChange: mySideChange});
},
function () {
$(this).find('div').stop().rotate3Di('unflip', 400, {sideChange: mySideChange});
}
);
http://davidwalsh.name/css-flip
I think you want backface-visibility: hidden;
I'll be honest I've only done this via CSS and not with javascript, but I had the same issue at first until I set the backface-visibility. Doing everything via javascript might require some extra magic.
I have a main php file that loads an external php file. This is the code in my main php file:
<php>
<head>
<meta http-equiv="content-type" content="text/php; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type="text/javascript" src="ajax.js"></script>
<link rel="stylesheet" href="colorbox.css" />
<script src="js/jquery.colorbox.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<link href="jimgMenukwicks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad'});
});
</script>
</head>
<div id="tengah" class="jimgMenu" >
<ul>
<li class="landscapes"> </li>
<li class="people"> </li>
<li class="nature"> </li>
</ul>
</div>
<div id="content" class="clearfix shadow">
<div id="sidebar" class="left">
<div id='ResponseDiv'> </div>
<div id="menu" class="inner">
</div>
</div>
<div id="main" class="right">
<h2>Detail</h2>
<div id='ResponseDiv2'> </div>
</div>
</div>
</div>
</php>
I have a function in ajax.js that calls an external php page named ajaxpage. Here the code in ajax.js:
function ajaxpage(url, containerid) {
var page_request = false
if(window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if(window.ActiveXObject) { // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} catch(e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP")
} catch(e) {}
}
} else return false
page_request.onreadystatechange = function () {
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, containerid) {
if(page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1)) document.getElementById(containerid).innerHTML = page_request.responseText
}
The problem is when I try to load "7.php" into my main.php the 7.php file is loaded but the animation in 7.php not working.
Does anyone know why this is happening?
this is the content of 7.php
<php>
<html>
<head>
<style type="text/css">
body {
background: #0F0D0D;
padding: 30px 0 0 50px;
}
div.sc_menu_wrapper {
position: relative;
height: 500px;
/* Make bigger than a photo, because we need a place for a scrollbar. */
width: 160px;
margin-top: 30px;
overflow: auto;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 130px;
border: 2px rgb(79, 79, 79) solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
/* When image support is turned off */
color: #fff;
background: rgb(79, 79, 79);
}
.sc_menu a:hover {
border-color: rgb(130, 130, 130);
border-style: dotted;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading {
position: absolute;
top: 50px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid rgb(79, 79, 79);
background: #1F1D1D;
}
/* 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);
}
/* Here are styles for a link to an article. Not for you :) */
#back {
margin-left: 8px;
color: gray;
font-size: 18px;
text-decoration: none;
}
#back:hover {
text-decoration: underline;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">/*<![CDATA[*/
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">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(){
// height of area at the top at bottom, that don't respond to mousemove
var inactiveMargin = 99;
// 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(){
$(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('');
});
/*
//Usage of hover event resulted in performance problems
scrollable.find('a').hover(function(){
tooltip
.stop()
.css('opacity', 0)
.text($(this).data('tooltipText'))
.animate({opacity: 1}, 1000);
}, function(){
tooltip
.stop()
.animate({opacity: 0}, 300);
});
*/
}
}
$(function(){
makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
</script>
</head>
<body>
<div style="overflow: hidden;" class="sc_menu_wrapper">
<div style="display: block;" class="sc_menu">
</div>
<div style="display: none;" class="loading">Loading...</div><div style="opacity: 0;" class="sc_menu_tooltip"></div></div>
</body></html>
</php>
See Hotel
This code will work...