i am currently working on an drag and drop system.
I would like to add an form that sends the outcome of the dragged boxes(location there currently in set by visitor) to my e-mail. Code is below.
<style type="text/css">
/* show the move cursor as the user moves the mouse over the panel header.*/
#draggablePanelList .panel-heading {
cursor: move;
}
</style>
<!-- Bootstrap 3 panel list. -->
<ul id="draggablePanelList" class="list-unstyled">
<li class="panel panel-info">
<div class="panel-heading">You can drag this panel.</div>
<div class="panel-body">Content ...</div>
</li>
<li class="panel panel-info">
<div class="panel-heading">You can drag this panel too.</div>
<div class="panel-body">Content ...</div>
</li>
</ul>
jQuery(function($) {
var panelList = $('#draggablePanelList');
panelList.sortable({
// Only make the .panel-heading child elements support dragging.
// Omit this to make then entire <li>...</li> draggable.
handle: '.panel-heading',
update: function() {
$('.panel', panelList).each(function(index, elem) {
var $listItem = $(elem),
newIndex = $listItem.index();
// Persist the new indices.
});
}
});
});
All help is welcome!
Related
So I am refactoring and redesigning an old application and I have multiple dropdown menus that hold data for people to enter and I would like for there to be a button that when clicked on scrolls to the next one and opens it just to make it easier to get through the form.
My html code looks like this:
<?php foreach loop that adds more dropdowns when entered in through a modal when they click new?>
<button class="tEntry-collapsible-btn tsHeader-collapsible-btn waves-effect"
id="testing"
type="button"
style="background-color: sienna !important;"></button>
<div class="tEntry-collapsible-row>
<div class="tTable-row">
//content to dropdown
</div>
</div>
....usually around 10-15 dropdown menus with the collapsible btn
<?php loop++ ?>
I added a photo for reference, the dropdown buttons are color coordinated and I added a next button at the bottom (minimal styling) and as of right now when the buttons are clicked it drops down fine but I'd also like a button that when clicked i guess focuses the next one and then opens it just for a smoother experience when working your way down the page.
Something like this?
Find the next dropdown and scroll to it with .scrollIntoView().
You would just call the function that drops the dropdown on the next element.
Note: not working well in the snippet... try my codepen
$(function() {
$(document).on('click', '.next', function() {
var el = $(this).closest('.dropdown');
var parent = el.closest('.wrap');
var next = el.nextAll('.dropdown').first();
// scroll like this
// parent.animate({
// scrollTop: next.position().top
// }, 1000);
// or like this; I prefer this one
next[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
});
});
.wrap {
height: 200px;
overflow-y: scroll;
}
.something {
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="dropdown">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<button class="next">next</button>
</div>
<div class="something"></div>
<div class="dropdown">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<button class="next">next</button>
</div>
</div>
I have the following layout
<div id="tabs">
<ul>
<li>Create Username</li>
<li>View Search Logs</li>
<li>Assign Values Table</li>
<li>Edit Values Table</li>
<li>Create Values Table</li>
</ul>
<div id="tabs-1">
<h2>Create Username</h2>
</div>
<div id="tabs-2">
<h2>View Search Logs</h2>
</div>
<div id="tabs-3">
<h2>Assign Values Table</h2>
</div>
<div id="tabs-4">
<h2>Edit Values Table</h2>
</div>
<div id="tabs-5">
<h2>Create Values Table</h2>
</div>
</div>
Each tab has a form in it, when the form is submitted and the page reloads I want the visible tab to still be the tab the user was last on (instead of it going back to the first).
Each form has a hidden field that contains the index of that tab. I then use the below:
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
selected: <?php echo (isset($_POST['selected_tab']) ? $_POST['selected_tab'] : 1)?>
});
});
</script>
This results in showing the right thing e.g
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
selected: 2
});
});
</script>
However the first tab is still the tab that is shown.
$("#tabs").tabs({
selected: 2
});
Should be:
$("#tabs").tabs({
active: 2
});
Tabs uses active property and not selected property.
Also note that the index is base 0, so if you want to select the 2nd tab, your value needs to be 1.
One option would be to include jquery-cookie.js an use tabs like this:
$( "#tabs" ).tabs({
cookie: {
expires: 1
}
});
And this will automatically manage your last open tabs with cookie.
I'm quite sure this has never been asked before.
I am new to jQuery and found jqmPhp very easy to use. However, I am trying to achieve a few things that I find very complicated to implement.
I need to filter list items (like here) and enable the user to check/uncheck several list items to delete. I am trying to implement a similar feature to what Gmail mobile is doing (with a checkbox on the left, where selecting it will make the relevant row highlight and allows users to just click a button to delete checked rows).
Is it possible at all to do that with jqmphp? If so, can anyone assist me with more information, links or code?
I made a Demo for you, by converting list-view into check-able list items.
http://jsfiddle.net/Palestinian/vcXmK/
HTML
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<ul id="list-view-test" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li>Adam Kinkaid
</li>
<li>Alex Wickerham
</li>
<li>Avery Johnson
</li>
<li>Bob Cabot
</li>
<li>Caleb Booth
</li>
<li>Christopher Adams
</li>
<li>Culver James
</li>
</ul>
Delete
Reset
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
Code
// Change icons
$('#list-view-test').find('span.ui-icon').each(function () {
if ($(this).hasClass('ui-icon-arrow-r')) {
$(this).removeClass('ui-icon-arrow-r').addClass('ui-icon-checkbox-off');
}
$('#list-view-test').listview('refresh');
});
// toggle "checked/unchecked"
$('#list-view-test').on('click', 'li', function (event) {
event.preventDefault();
$(this).find('span.ui-icon').removeClass('ui-icon-checkbox-off').addClass('ui-icon-checkbox-on');
});
// Delete selected
$('#del').on('click', function () {
$('span.ui-icon').each(function () {
if ($(this).hasClass('ui-icon-checkbox-on')) {
$(this).closest('li').remove();
$('#list-view-test').listview('refresh');
}
});
});
// Clear selection
$('#reset').on('click', function () {
$('span.ui-icon').each(function () {
if ($(this).hasClass('ui-icon-checkbox-on')) {
$(this).removeClass('ui-icon-checkbox-on').addClass('ui-icon-checkbox-off');
}
});
});
I have a navigation which load dynamically content via ajax. But if I refresh the page or visit another url and go back the current content is away and I see the old content under the first menu tab.
Now I have to solve this problem.
The index.php include the elements header_registrated.inc.php, navigation.inc.php and main_container.inc.php
index.php:
<?php include("inc/incfiles/header_registrated.inc.php"); ?>
<?php
if (!isset($_SESSION["userLogin"])) {
echo "<meta http-equiv=\"refresh\" content=\"0; url=http://localhost/project\">";
}
else {
echo "";
}
?>
<?php include("inc/incfiles/navigation.inc.php"); ?>
<?php include("inc/incfiles/main_container.inc.php"); ?>
<?php include("inc/incfiles/footer.inc.php"); ?>
header_registrated.inc.php:
<?php
include ("inc/scripts/mysql_connect.inc.php");
session_start();
$user = $_SESSION["userLogin"];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/framework/jquery.js"></script>
<script language="JavaScript" src="js/dropdown/window.js"></script>
<script language="JavaScript" src="js/navigation/navigation.js"></script>
</head>
<body>
</body>
navigation.inc.php:
<div class="navigation">
<ul>
<li id="1">
<div id="menuImage1" class="menuImage"></div>
<div class="menuText"><p>Punkt 1</p></div>
<div class="navigationDart"></div>
</li>
<li id="2">
<div id="menuImage2" class="menuImage"></div>
<div class="menuText"><p>Punkt 2</p></div>
</li>
<li id="3">
<div id="menuImage3" class="menuImage"></div>
<div class="menuText"><p>Punkt 3</p></div>
</li>
<li id="4">
<div id="menuImage4" class="menuImage"></div>
<div class="menuText"><p>Punkt 4</p></div>
</li>
<li id="5">
<div id="menuImage5" class="menuImage"></div>
<div class="menuText"><p>Punkt 5</p></div>
</li>
<li id="6">
<div id="menuImage6" class="menuImage"></div>
<div class="menuText"><p>Punkt 6</p></div>
</li>
</ul>
</div>
main_container.inc.php:
<div class="mainContainer">
<div class="containerHeader">
<div class="contentHeader">
</div>
</div>
<div class="contentContainer">
<div class="content">
</div>
<div class="advertisement">
</div>
</div>
</div>
Now the divs content, cnotentHeader and advertisement (in file main_content.inc.php) is filled via ajax. Also the navigation has some jquery effects which also have to be the same after page refresh.
navigation.js:
$(document).ready(function() {
$.get('inc/incfiles/content_container/header/1.php', function(data) {
$('.contentHeader').html(data);
});
$.get('inc/incfiles/content_container/content/1.php', function(data) {
$('.content').html(data);
});
$.get('inc/incfiles/content_container/advertisement/1.php', function(data) {
$('.advertisement').html(data);
});
var current = '1.php';
$(".navigation li").click(function() {
var quelle = $(this).attr('id') + ".php";
// the current content doesn't load again
if(current === quelle) {
return;
}
current = quelle;
// content
$(".content").fadeOut(function() {
$(this).load("inc/incfiles/content_container/content/" + quelle).fadeIn('normal');
})
// advertisement
$(".advertisement").fadeOut(function() {
$(this).load("inc/incfiles/content_container/advertisement/" + quelle).fadeIn('normal');
})
// header
$(".contentHeader").fadeOut(function() {
$(this).load("inc/incfiles/content_container/header/" + quelle).fadeIn('normal');
})
});
$(".navigation li").click(function() {
$(".menuImage").removeClass("menuImageActive1");
$(".menuImage").removeClass("menuImageActive2");
$(".menuImage").removeClass("menuImageActive3");
$(".menuImage").removeClass("menuImageActive4");
$(".menuImage").removeClass("menuImageActive5");
$(".menuImage").removeClass("menuImageActive6");
});
$("#1").mousedown(function() {
$("#menuImage1").addClass("menuImageClick1"); // new class on mouse button press
});
$("#1").mouseup(function() {
$("#menuImage1").removeClass("menuImageClick1"); //remove class after mouse button release
});
$("#1").click(function() {
$("#menuImage1").addClass("menuImageActive1");
});
$("#2").mousedown(function() {
$("#menuImage2").addClass("menuImageClick2"); // new class on mouse button press
});
$("#2").mouseup(function() {
$("#menuImage2").removeClass("menuImageClick2"); //remove class after mouse button release
});
$("#2").click(function() {
$("#menuImage2").addClass("menuImageActive2");
});
$("#3").mousedown(function() {
$("#menuImage3").addClass("menuImageClick3"); // new class on mouse button press
});
$("#3").mouseup(function() {
$("#menuImage3").removeClass("menuImageClick3"); //remove class after mouse button release
});
$("#3").click(function() {
$("#menuImage3").addClass("menuImageActive3");
});
$("#4").mousedown(function() {
$("#menuImage4").addClass("menuImageClick4"); // new class on mouse button press
});
$("#4").mouseup(function() {
$("#menuImage4").removeClass("menuImageClick4"); //remove class after mouse button release
});
$("#4").click(function() {
$("#menuImage4").addClass("menuImageActive4");
});
$("#5").mousedown(function() {
$("#menuImage5").addClass("menuImageClick5"); // new class on mouse button press
});
$("#5").mouseup(function() {
$("#menuImage5").removeClass("menuImageClick5"); //remove class after mouse button release
});
$("#5").click(function() {
$("#menuImage5").addClass("menuImageActive5");
});
$("#6").mousedown(function() {
$("#menuImage6").addClass("menuImageClick6"); // new class on mouse button press
});
$("#6").mouseup(function() {
$("#menuImage6").removeClass("menuImageClick6"); //remove class after mouse button release
});
$("#6").click(function() {
$("#menuImage6").addClass("menuImageActive6");
});
$("#1").click(function(){
$(".navigationDart").animate({
top: "16px"
}, 500 );
});
$("#2").click(function(){
$(".navigationDart").animate({
top: "88px"
}, 500 );
});
$("#3").click(function(){
$(".navigationDart").animate({
top: "160px"
}, 500 );
});
$("#4").click(function(){
$(".navigationDart").animate({
top: "232px"
}, 500 );
});
$("#5").click(function(){
$(".navigationDart").animate({
top: "304px"
}, 500 );
});
$("#6").click(function(){
$(".navigationDart").animate({
top: "376px"
}, 500 );
});
});
My idea was it to work with if(isset($_SESSION['ajaxresponse'])) but I don't no how to do this.
Please help me. I have the feeling that I've searched the whole web to find an answer.
I recomend using a library that ties PHP to jQuery through AJAX and can ease your problems a lot. the library is phery http://phery-php-ajax.net
just some optimization for your navigation.js file:
You'll need to centralize (or not) the AJAX in one file, to make it easier.
It can go on the top of your index.php
function load($data){
$r = new PheryResponse;
if (!isset($_SESSION["userLogin"])) {
return $r->redirect('http://localhost/project');
}
$path = 'inc/incfiles/content_container/';
if (isset($data['id'])){
$id = $data['id']. '.php';
} else {
if (!empty($_SESSION['id'])){
$id = $_SESSION['id'];
} else {
$id = '1.php';
}
}
$_SESSION['id'] = $id; // save the current ID and will load next time the person refreshes the page
ob_start();
include $path.'content/'.$id;
$content = ob_get_clean();
ob_start();
include $path.'advertisement/'.$id;
$ads = ob_get_clean();
ob_start();
include $path.'header/'.$id;
$header = ob_get_clean();
$r
->jquery('.advertisement')->html($ads)
->jquery('.contentHeader')->html($header)
->jquery('.content')->html($content)
;
// etc
return $r->this()->find('.menuImage')->addClass('menuImageActive'); // set the current menuImage of the LI element to menuImageActive
}
session_start();
Phery::instance()->set(array(
'load' => 'load'
))->process();
Since your JS it non-performant right now, I've redone it:
$(function() {
phery.remote('load');
var menu_image = $(".menuImage");
$(document)
.on('click', '.navigation li', function(event){
menu_image.removeClass("menuImageActive");
var top;
switch (event.currentTarget.id){
case '1':
top = "16px";
break;
case '2':
top = "88px";
break;
case '3':
top = "160px";
break;
case '4':
top = "232px";
break;
case '5':
top = "304px";
break;
case '6':
top = "376px";
break;
}
$(event.currentTarget)
.find(".navigationDart").animate({ top: top }, 500);
})
.on('mousedown', '.navigation li', function(event){
$(event.currentTarget).addClass('menuImageClick');
})
.on('mouseup', '.navigation li', function(event){
$(event.currentTarget).removeClass('menuImageClick');
});
});
and your navigation.inc.php will have to be:
<div class="navigation">
<ul>
<li id="1" data-remote="load" data-args="{'id':1}">
<div id="menuImage1" class="menuImage"></div>
<div class="menuText"><p>Punkt 1</p></div>
<div class="navigationDart"></div>
</li>
<li id="2" data-remote="load" data-args="{'id':2}">
<div id="menuImage2" class="menuImage"></div>
<div class="menuText"><p>Punkt 2</p></div>
</li>
<li id="3" data-remote="load" data-args="{'id':3}">
<div id="menuImage3" class="menuImage"></div>
<div class="menuText"><p>Punkt 3</p></div>
</li>
<li id="4" data-remote="load" data-args="{'id':4}">
<div id="menuImage4" class="menuImage"></div>
<div class="menuText"><p>Punkt 4</p></div>
</li>
<li id="5" data-remote="load" data-args="{'id':5}">
<div id="menuImage5" class="menuImage"></div>
<div class="menuText"><p>Punkt 5</p></div>
</li>
<li id="6" data-remote="load" data-args="{'id':6}">
<div id="menuImage6" class="menuImage"></div>
<div class="menuText"><p>Punkt 6</p></div>
</li>
</ul>
</div>
it seems your CSS is convoluted for the simplicity of your HTML. And you shouldn't be using a number for an ID, IDs needs to be You should be reusing css classes in this case, like
.menuImageActive {
/* common styles */
}
.menuImageClick {
/* common styles */
}
/* apply per ID */
#menuImage1.menuImageActive {
}
#menuImage1.menuImageClick {
}
#menuImage2.menuImageActive {
}
#menuImage2.menuImageClick {
}
#menuImage3.menuImageActive {
}
#menuImage3.menuImageClick {
}
#menuImage4.menuImageActive {
}
#menuImage4.menuImageClick {
}
#menuImage5.menuImageActive {
}
#menuImage5.menuImageClick {
}
#menuImage6.menuImageActive {
}
#menuImage6.menuImageClick {
}
Try out jQuery UI tabs if you need dynamically loaded tabs, it has built in AJAX support.
If you want back/forward support for AJAX events try out the jQuery address plugin.
There is a good answer on how to use jQuery UI tabs with back/forward history here:
I'm having the following scenario. I have a menu and if one hovers over the menu a sub menu appears and if mouse moves out the sub menu disappears, now I want the following if I click on the on a item in the sub menu, I want the sub-menu to remain open, when the new page has been loaded. I'm using superfish Jquery plugin for this.
Is this possible and if how.
my code in html
<div id="nav">
<div id="nav2">
<ul class="sf-menu sf-navbar ">
<li>
<a title="HOME" class="sf-with-ul " href="/index.php?r=site/index&sid=1">HOME</a> </li>
</ul>
<ul class="sf-menu sf-navbar">
<li>
GALLERY
<ul class="subs" id="sub1"><li class="arrow"><img src="images/arrow.gif" /></li><li><a title="Kitchens" href="/index.php?r=images/sddsd&id=1">Kitchens</a></li><li><a title="Vanities" href="/index.php?r=images/sddsd&id=2">Vanities</a></li></ul> </li>
</ul>
<ul class="sf-menu sf-navbar ">
<li>
<a href="?sid=3" class="sf-with-ul " >ACCESSORIES</a>
<ul class="subs" id=""><li class="arrow"><img src="images/arrow.gif" /></li><li><a title="Door Handles" href="/index.php?r=images/sddsd&id=2">Door Handles</a></li><li><a title="Spanners" href="/index.php?r=images/sddsd&id=1">Spanners</a></li></ul> </li>
</ul>
<ul class="sf-menu sf-navbar ">
<li>
<a title="CONTACT US" class="sf-with-ul " href="/index.php?r=site/contact&sid=4">CONTACT US</a> </li>
</ul>
</div>
</div>
and then
the superfish code
$(function(){
$("ul.sf-menu").superfish({
delay: 0,
speed: 'fast',
autoArrows: false,
dropShadows: false
});
});
I've also noticed that the following css code is used to display the item
left: 0;
top: 2.5em;
z-index: 99;
I post a demo for you. Basically I've added a "onHide" function to the superfish function, then some additional coding that keep the menu persistent.
Additional CSS (to default suckerfish.css)
.sf-menu li.sfSelected {
background-color: #CFDEFF;
}
Script
$(function(){
var menu = $("#nav");
menu.find("ul.sf-menu")
.superfish({
delay: 0,
speed: 'fast',
autoArrows: false,
dropShadows: false,
onHide: function(){
if (this.parent().is('.sfPersist')) {
this.show().css('visibility','visible').parent().addClass('sfHover');
}
}
})
.find('li > ul > li').click(function(){
// hide previously persistent children (LOL that just sounds wrong)
menu.find('.sfPersist')
.removeClass('sfPersist sfHover')
.find('> ul').hide().css('visibility','hidden');
// add children that should be persistent
if ($(this).is('.sfSelected')) {
// if previously selected, keep hidden
menu.find('li.sfSelected').removeClass('sfSelected');
} else {
// Hide other selected classes
menu.find('li.sfSelected').removeClass('sfSelected');
// if newly selected, then show
$(this)
.addClass('sfSelected') // remember which one is selected
.parent()
.show().css('visibility','visible')
.parent().addClass('sfHover sfPersist');
}
});
});