Currently, I'm doing up an auto-scroll function for a list on my site.
However, after the first item in the list disappears, the second one kinds of 'jump in to position' of the first item. What i want to know if it is possible to make the second item slide in to position in jquery and how can i do it? The following is the javascript code and html. Thanks for any help in advance.
Javascript:
<script>
var ad_refresh=setInterval(function(){
var $target=$("div.manufacturer_list ul li:eq(1)");
var position_1 = $target.position();
$target.fadeOut('slow', function(){
$target.appendTo('div.manufacturer_list ul').show();
});
},5000);
</script>
HTML(Sample) generated:
<div class="manufacturer_list">
<ul>
<li style="float:left;width:200px">Item 1</li>
<li style="float:left;width:200px">Item 2</li>
<li style="float:left;width:200px">Item 3</li>
<li style="float:left;width:200px">Item 4</li>
<li style="float:left;width:200px">Item 5</li>
...
...
...
</ul>
</div>
Do you want to do scrolling/rotating vertical menu items into left side?
http://jsbin.com/welcome/53677
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var ad_refresh=setInterval(function(){
var $target=$("div.manufacturer_list ul li:first");
$target.animate({
marginLeft: -200,
opacity: 0,
}, function(){
$target.css({
marginLeft: 200
}).appendTo('div.manufacturer_list ul').animate({
marginLeft: 0,
opacity: 1
})
});
},1000);
</script>
<style type="text/css">
.manufacturer_list {
width: 800px;
height: 40px;
overflow: hidden;
}
.manufacturer_list li {
float:left;
width: 200px;
}
</style>
</head>
<body>
<div class="manufacturer_list">
<ul>
<li>foo1</li>
<li>foo2</li>
<li>foo3</li>
<li>foo4</li>
<li>foo5</li>
</ul>
</div>
</body>
</html>
I guess you can do it with transition properties in css. Please let me know if it works for you
transition-property: all;
transition-duration: 0.5s;
-moz-transition-property: all; /* Firefox 4 */
-moz-transition-duration: 0.5s; /* Firefox 4 */
-webkit-transition-property: all; /* Safari and Chrome */
-webkit-transition-duration: 0.5s; /* Safari and Chrome */
-o-transition-property: all; /* Opera */
-o-transition-duration: 0.5s; /* Opera */
Related
So, I have a main menu bar on my website and a "submenu" bar just underneath. The submenu bar is currently not linked at all to the main menu bar (I mean by this, on any page that you are, the submenu bar is the same).
This is what it looks like: (sorry for the ugly paint skills)
Anyway, I'm trying to make the links in the submenu bar change when you hover one of the big buttons of the main menu.
This is what I tried in my html:
<div id = 'nav'>
<div id = 'hovermenu1'>
<div class = 'button-accueil'></div>
<div id = 'menu1'>
Link 1
Link 2
Link 3
</div>
</div>
<div id = 'hovermenu2'>
<div class = 'button-guide'></div>
<div id = 'menu2'>
Link 1
Link 2
Link 3
</div>
</div>
[...] <!-- And we go on like this until hovermenu6 -->
<div id = 'hovermenu6'>
<div class = 'button-contact'></div>
<div id = 'menu6'>
Link 1
Link 2
Link 3
</div>
</div>
</div>
And in my css:
#menu1 {
background:url(/images/menu.jpg) no-repeat left top;
text-align:center;
display:none;
float:left;
margin-left:16px;
margin-top:2px;
padding-top:9px;
width:700px;
height:33px;
}
#menu2 {
background:url(/images/menu.jpg) no-repeat left top;
text-align:center;
display:none;
float:left;
margin-left:16px;
margin-top:2px;
padding-top:9px;
width:700px;
height:33px;
}
[...] /* And we go on like this until menu6 */
#menu6 {
background:url(/images/menu.jpg) no-repeat left top;
text-align:center;
display:none;
float:left;
margin-left:16px;
margin-top:2px;
padding-top:9px;
width:700px;
height:33px;
}
#hovermenu1:hover #menu1 {
display: inline;
}
#hovermenu2:hover #menu2 {
display: inline;
}
[...] /* And we go on like this until hovermenu6 */
#hovermenu6:hover #menu6 {
display: inline;
}
This, unfortunately, doesn't work.
I figured out it kinda works when I didn't close all the div id="hovermenu1/2/3/4/5/6 and closed them all at the bottom but it still doesn't work properly at all. When you hover The 6th button, it considers that you are hovering all buttons and it tries to display all menus.
Could you help me figure out what I am doing wrong and how I could fix this please?
Thank you so so much if anyone can help me. I'm stuck on this thing for a while!
Regards,
Orangow.
I would simply your HTML and not try to tie the main buttons to the submenu quite as much. It's not necessary. You can simply make one div for each submenu, and hide all of them except the one that's active. Then use JavaScript to capture the hover event for each main menu item, and hide/show the submenu as necessary. For instance:
<div id="main1">Button</div><div id="main2">Button2</div><div id="main3">Button3</div>
<div id="sub1" style="display:none;">Link 1Link 2Link 3</div>
<div id="sub2" style="display:none;">Link 1Link 2Link 3</div>
<div id="sub3" style="display:none;">Link 1Link 2Link 3</div>
<script>
$(document).ready(function(){
$('#main1').hover(function(){ $('#sub1').show(); $('#sub2').hide(); $('#sub3').hide(); },
function(){ $('#sub1').hide(); }
$('#main2').hover(function(){ $('#sub2').show(); $('#sub1').hide(); $('#sub3').hide(); },
function(){ $('#sub2').hide(); }
$('#main3').hover(function(){ $('#sub3').show(); $('#sub2').hide(); $('#sub1').hide(); },
function(){ $('#sub3').hide(); }
});
</script>
This is kind of down-and-dirty, but hopefully, it makes sense and moves you along.
Introduction
I currently use the jQuery .sortable function and it works like a charm. However this is only client side and I would like to store the new sorting position to the backend (mySQL database).
I store the sorting order using numerical field (and retrieved using SQL ORDER BY).
Menu text Sorting ID
------------ ---------
Menu item #1 => 0
Menu item #2 => 1
Menu item #3 => 2
Menu item #4 => 3
Current HTML code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #4</li>
</ul>
</body>
</html>
Tinker.io link: http://tinker.io/b3f27
The question
Now, how would I store the new position into the database? Adding an ID to the sortable and posting it back to a php script which would lookup both sorting positions and switch them over is what I would do but I'm looking forward for your opinions.
This is basic idea is sending data using AJAX after update:
JS:
$("#sortable").sortable({
update : function () {
var items = $('#sortable').sortable('serialize');
$.get("sort.php?"+items);
}
});
HTML:
<ul id="sortable">
<li id="s_1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #1</li>
<li id="s_2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #2</li>
<li id="s_3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #3</li>
<li id="s_4" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Menu item #4</li>
</ul>
Here you need to set id to each LI, please see working demo
PHP:
<?php
var_dump($_GET);
?>
You can find more detailed answers here
this would be my first time for a drag and drop functionality. i have to make timetable application for a college which would require dragging from a list of teacher responsibilities on the left side containing all the required values and dropping into a timetable slot on the right side, then popping up a dialog box for asking room number and then performing various checks at php and mysql level and then finally inserting into database. Also, without mentioning this has to be an ajax solution.
I really want this to be a pure javascript solution and not some frameworks like jquery, prototype etc as i have a race against time and i haven't ever used any frameworks before so i cant dish out time to learn one of these now. But if u guys cant help me with pure javascript, i'l have to use one of the above mentioned frameworks.
Please help as soon as possible. Also, do ask if u want some more clarification as to what exactly i want to achieve.
First Option is : In core javascript you can use using HTML5 drag drop feature but it has problems specially in safari browser.
Second Option is : http://jqueryui.com/sortable/#connect-lists
Put following code I'll tell you how to call ajax. I am still here to help you till you get expected output
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Connect lists</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
#left, #right { border:1px solid #000000;min-height:100px;min-width:100px;list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
#left li, #right li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( "#left, #right" ).sortable({
connectWith: ".connectedSortable",
receive: function(event,ui){
console.log("old ui id = "+ui.sender.attr("id")+" new ul id = "+this.id+" li id "+$(ui.item).attr("id"));
if(ui.sender.attr("id") != this.id)
{
//Your ajax call will come here
$.ajax({
type: "POST",
url: "logic.php",
// Write you //php mysql logic here you'll get all your data in logic.php file
data: { left: ui.sender.attr("id"), right: this.id , responsibility:$(ui.item).attr("id") }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
}
}
}).disableSelection();
});
</script>
</head>
<body>
<ul id="left" class="connectedSortable">
<li id="1" class="ui-state-default">Item 1</li>
<li id="2" class="ui-state-default">Item 2</li>
<li id="3" class="ui-state-default">Item 3</li>
<li id="4" class="ui-state-default">Item 4</li>
<li id="5" class="ui-state-default">Item 5</li>
</ul>
<ul id="right" class="connectedSortable">
<li id="6" class="ui-state-highlight">Item 1</li>
<li id="7" class="ui-state-highlight">Item 2</li>
<li id="8" class="ui-state-highlight">Item 3</li>
<li id="9" class="ui-state-highlight">Item 4</li>
<li id="10" class="ui-state-highlight">Item 5</li>
</ul>
</body>
</html>
I'm having a problem with a javascript that I want to include in a wordpress template page.
What I'm trying to do:
On this page - http://www.pcworld.ro/vworker/ - I want to call a javascript that will fade-in/out 6 images (you can see the first image in the top right side of the header).
This is the script: http://www.pcworld.ro/vworker/wp-content/themes/visualtime/js/innerfade.js
This is what I have in header.php:
<?php wp_enqueue_script('innerfade', '/vworker/wp-content/themes/visualtime/js/innerfade.js', array('jquery'));?>
<?php wp_head();?>
<script type="text/javascript">
$(document).ready(
function(){
$('ul#screenshots').innerfade({
speed: 1000,
timeout: 4000,
type: 'random',
containerheight: '259px'
});
});
</script>
This is what I have in functions.php:
<?php
function load_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('innerfade', '/wp-content/themes/visualtime/js/innerfade.js', array('jquery'));
}
add_action('init', 'load_scripts');
?>
And this is the code that should be responsible for the javascript in homepage.php (the wordpress template page where I need the javascript to work):
<div id="screenshot" style="overflow:hidden;">
<ul class="innerfade" id="screenshots" style="list-style: none outside none; margin: 0pt; padding: 0pt; cursor: pointer; position: relative; height: 259px;" onclick="location.href='#'">
<li style="z-index: 6; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot1.jpg" alt="Room Booking System">
</li>
<li style="z-index: 5; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot2.jpg" alt="Complete Administration Panel">
</li>
<li style="z-index: 4; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot3.jpg" alt="Meeting Room Bookings">
</li>
<li style="z-index: 3; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot4.jpg" alt="View Statistics of All Room Bookings">
</li>
<li style="z-index: 2; position: absolute; display: none;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot5.jpg" alt="Including a Helpdesk System">
</li>
<li style="z-index: 1; position: absolute; display: list-item;">
<img src="/vworker/wp-content/themes/visualtime/images/productscreenshot6.jpg" alt="Intelligent Recurring Bookings">
</li>
</ul>
</div>
I'm a beginner when it comes to wordpress and an absolute noob when there's javascript involved. Could you please explain me what I'm doing wrong and to fix it?
This is common among wordpress theme developers, they automatically include jQuery.noConflict() in jquery file to avoid collision with other libraries.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Several choices:
Remove jQuery.noConflict(); from bottom of the jquery file
-or-
Replace $ in all your code with the text jQuery. The plugin files you use should be insulated and are OK
-or-
Change
$(document).ready(
function(){
//.........
}
to
jQuery(document).ready(
function($){
//.........
}
WIth $ as argument in ready you can use $ inside it
i have the menu structure like below,
<ul>
<li style="background-image:ur('open.gif');">
<ul class="sub-menu">
...........
</ul>
</li>
<li>
<ul class="sub-menu">
...........
</ul>
</li>
<li>
<ul class="sub-menu">
...........
</ul>
</li>
</ul>
the first li which has style="background-image:ur('open.gif');" is displayed with dropdown now.
if i click in other li's the style will apply that li's also style="background-image:ur('open.gif');"
Now two li's display it's dropdown li's.
i Need to do is if one li is set with style="background-image:ur('open.gif');" this one. if i click another li, i need to set previous li's UL style display:none which is with style style="background-image:ur('open.gif');".
How can i do this?
You better add a class "open" to the LI and handle the URL with CSS.
Example with JS:
$(function(){
$("#menu").children().hover(function(){
$(this).addClass("open");
},
function(){
$(this).removeClass("open");
});
});
CSS
#menu li
{
background-image:url('closed.gif');
}
#menu li.open
{
background-image:url('open.gif');
}
Example without JS
#menu li ul
{
display: none;
background-image:url('closed.gif');
}
#menu li:hover ul
{
display: block;
background-image:url('open.gif');
}
If I've understood your problem correctly, this should work:
$("LI").click(function() {
$("LI").css("background-image", "none");
$(this).css("background-image", "url('open.gif')");
});
Adding and removing a class would be more appropriate here as it would mean you can control the image shown in the background from your stylesheet without needing to change your code (this is called separation of concerns).
$("LI").click(function() {
$("LI").removeClass("open");
$(this).addClass("open");
});
CSS:
.open { background-image: url('open.gif'); }