I have a a list of items in HTML which represent a food menu
<ul>
<li id = "soratable1" >big burger<p>decription of big burger</p><small>$6.50</small></li>
<li id = "soratable2" >cheese burger<p>decription of cheese burger</p><small>$6.50</small></li>
<li id = "soratable3" >fish burger<p>decription of fish burger</p><small>$6.50</small></li>
<li id = "soratable4" >bacon burger<p>decription of bacon burger</p><small>$6.50</small></li>
Using jquery I am making this a sortable list. The user can add and remove items from this list. To edit I would just like to have the user click on the text, edit it and automatically update in the database. I was thinking of having each item in a text box and hide the boarder with css, then use some onfocus onblur wizardry but this seems a bit archaic.
Any suggestions?
One alternative is to use jEditable plugin.
Check it out # http://www.appelsiini.net/projects/jeditable
You could have an 'edit' icon of some kind that swaps the text contained in the li for an input box containing that text.
Then, listen to the onblur event of the input.
Here is an example of what that would look like.
Html:
<ul>
<li><a id="LINK" href="#">edit</a><span id="TEXT">Text goes here</span><input id="INPUT" type="text" style="display:none" /></li>
</ul>
Javascript:
$(document).ready(function()
{
$("#LINK").click(function(){
$("INPUT").val($("#TEXT").text());
$("INPUT").show();
$("#TEXT").hide();
});
$("#INPUT").blur(function(){
$("#TEXT").html($("INPUT").val());
$("#INPUT").hide();
$("#TEXT").show();
});
});
Related
I am really tired for searching this can someone help me... help will be really appreciate.
My question is Suppose I have one div element eg.
<div name="div1" class="demo">
and I have some links in that div so my code will something like:
<div name="div1" class="demo">
<ul>
<li> <a>Example1</a></li>
<li> <a> Example2</a></li>
</div>
and I have another div element which is
<div name="div2" class="demo2"> </div>
and I Now what i want, when i will click the link in first div eg. Example1.. I want the response of that link into div no 2 . IE on the another div which is
<div name="div2" class="demo2">
This is provided in html, for instance
<div id="name">
<ul>
<li> <a href="yourpage.html#name2" > Example1 </a> </li>
<li> <a> Example2 </a></li>
</ul>
</div>
Then in your reference div ensure you have given it the referring id, for instance
<div id="name2" class="demo2"> </div>
When you click on first link it should bring up the div with the id requested. Of course styling effects such as z-index can be added.
To be frank, you question is not understandable, However I am relating "Response" to "HTML" and "Link" to "Element".
So, Onclick of demo the content of demo will be moved to demo2.
Use JQUERY,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
$(".demo").on("click", function(e){
$(".demo2").html($(this).html());
});
<?php echo CHtml::dropDownList('listname', $select, array('M' => 'Male', 'F' => 'Female')); ?>
the example in the Yii site only shows how to set the options with plain text. Is there any way to set it with some pictures?
Any help will be appreciated.
Best regards!
Dropdownlist generates a select tag in client html, which doesn't support using image as its option.
To use image as the option for a select, you can implement some code like the following:
<div style='position: relative'>
<div class='usersel'>here to display what user select currently</div>
<ul style='position: absolute'>
<li><img src='1.png' /><span>text</span></li>
<li><img src='2.png' /><span>text</span></li>
<li><img src='3.png' /><span>text</span></li>
</ul>
</div>
then use jQuery to catch event mousedown or mouseenter on the outer div, display the inner ul child, and bind click event to li, when li is clicked, set the div.usersel with the selected value.
I have implemented the image Drag an Drop as seen in the following example: http://jqueryui.com/droppable/#photo-manager. I have added the ID's for each image element so that I can create a list of the Trashed elements and another for the ones that stay untouched.
I could really use some help on getting the selected and non-selected id's into PHP
variables after the dropping took place.
Starting UL gallery (Draggable) Image element with id e.g.:
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<img src="img/gler.png" alt="lake" width="96" height="32" id="2">
Delete image
</li>
</ul>
Trash DIV (Droppable)
<div id="trash" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>
Using javascript you'll need to build an array of ids in each container like this:
var selected = [],
unselected = [];
$('#gallery img').each(function(){
selected.push($(this.attr('id'));
});
$('#trash img').each(function(){
unselected.push($(this.attr('id'));
});
You may trigger this action using an event such as after each drop or when a user clicks a done button, whatever. Now pass those arrays to the server however you like(refresh the page or ajax call).
I'm using a form with multiple submits to detect which button is clicked, but the list does not appear properly in a jQuery Mobile menu. I want it to appear nicely like in the JQM docs (click the "Menu" button), but it instead appears like in this picture. (In case it isn't obvious, the black boxes were me editing the names out.) What do I need to do to get it to collapse the submit buttons into a nice list like in the docs?
Navigate to different section
<div data-role="popup" id="navmenu">
<form name="navmenuform" action="X.php" method="post">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<?php foreach ($array as $category) { ?>
<li><input type="submit" name="nav<?php echo $category[0]; ?>" value="Section <?php echo $category[0] . ": " . $category[1]; ?>"></li>
<?php } ?>
</ul>
</form>
</div>
The short answer is don't put submit buttons (at least visible) in listview items.
The problem is that buttons and lisview item's content area have their styling padding, margin, border, etc. Instead of fighting with styling you can just leverage what jQM gives you.
IMHO the simplest way to achieve what you want, if you can live with GET instead of POST, is to ditch the form and populate list items with anchors that href to appropriate urls with parameters and use rel="external" like this:
<div data-role="popup" id="navmenu" style="min-width:210px;">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<li><a rel="external" href="X.php?nav1=Section 1:1">Section 1:1</a></li>
<li><a rel="external" href="X.php?nav2=Section 1:2">Section 1:2</a></li>
<li><a rel="external" href="X.php?nav3=Section 1:3">Section 1:3</a></li>
<li><a rel="external" href="X.php?nav4=Section 1:4">Section 1:4</a></li>
</ul>
</div>
If you want to be able to POST your form you can utilize a hidden input and a bit of JS code.
Given that you'll produce the following markup:
<div data-role="popup" id="navmenu" style="min-width:210px;">
<form name="navmenuform" action="X.php" method="post" data-ajax="false">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<li>Section 1:1</li>
<li>Section 1:2</li>
<li>Section 1:3</li>
<li>Section 1:4</li>
</ul>
<input id="param" type="hidden" name="" value="">
</form>
</div>
Don't forget to put data-ajax="false" on your form tag, otherwise jQM by default will try to submit the form via ajax.
You then use click event on a list item, change name and value in your hidden input and submit the form:
$(document).on("pageinit", "#page1", function(){
$("#navmenu ul li a").click(function(e){
//Prevent default behavior since we need to submit the form instead of following the link
e.preventDefault();
//Change name and value attributes in out hidden input
$("#param").attr("name", $(this).attr("href")).val($(this).text());
//Submit the form
$("form[name=navmenuform]").submit();
});
});
Here is jsFiddle
Ok,
Firstly, if you click on the questions link at the top of this page, each question has some buttons at the bottom that pertain to the question. when you mouseover them it shows more about the button. How is this done? I want to do this on my site.
So basically, i am using a php while loop to echo listitems's queried from a users id in mysql.
each listitem contains some more block and inline elements. some of those block elements have onmouseover/mouseout events attached to them. yet if i use the same class name on those elements, when i trigger a mouseover, it triggers every element with that class name. I am new to php / js / jquery, and not sure on the best way to go about it. any help would be grand. Example below.
<ul class="ulclass">
<?php
$link = mysql_query("SELECT * FROM table WHERE id='".$_SESSION['id']."' ORDER BY lid");
$i = 1;
while ($row=mysql_fetch_assoc($link)) {
$ico = $row['url'];
echo '
<li>
<a href="'.$row['url'].'" target="_blank" >
<div class="title">'.$row['title'].'</div>
</a>
<div onclick="/*here i want to change the next div.css display to block*/">
<img src="something.png" class="something_img"/>
<div class="drop_menu" id="drop_menu'.$i.'"
onmouseout="t=setTimeout(\'/*here i want to change this div.
css display back to none*/\',300);" >
<form method="post" action="" onmouseover="clearTimeout(t);">
<input type="hidden" name="deletetitle" value="'.$row['hash'].'"/>
<input type="submit" class="" name="delete" value="x"/>
</form>
</div>
</div>
</li>';
$i++;
}
?>
</ul>
let's fix some little things first. You don't really need to put all the HTML in a string, you can just do stuff like:
<?php
while ( $i < 10 ) {
?>
<li>Line number <?php echo $i; ?></li>
<?php
$i++;
}
?>
This way you will retain syntax highlighting and you won't have all kinds of problems that will arise from using string (like having to escape all single quotes etc.).
On the subject of JavaScript / jQuery – you shouldn't really use inline event handlers, such as onclick / onmouseover. It's really hard to maintain mixed up code, it's already enough there is HTML and PHP, don't add JavaScript to the same place. You should put in a separate file (or at least in a separate <script> tag before the closing </body> tag) and hook to the elements by their classes. I simplified your code a little, I am also not 100% sure what you wanted to achieve with the code you posted, but judging by the example of stackoverlow tag links, I will do something similiar:
<a href="'.$row['url'].'" target="_blank" class="tag">
<div class="title">'.$row['title'].'</div>
<div class="drop-out">Content of the drop-out.</div>
</a>
So, we have class tag for the link, and we want to hover it and see the internal element, and we take the mouse out it should disappear, let's see what jQuery we need for that (don't forget to add it to your page):
$('.tag').hover(
function () {
// `this` points to the DOM element we are hovering
$(this).children('.drop-out').css({
display : 'block'
, opacity : 1
});
}
, function () {
$(this).children('.drop-out').animate({
opacity : 0
}, 350, function () {
$(this).css('display', 'none');
});
}
);
Here's the example: http://jsfiddle.net/R6sYD/
jQuery methods used in this example:
http://api.jquery.com/hover/
http://api.jquery.com/children/
http://api.jquery.com/css/
http://api.jquery.com/animate/
Hope this helps.