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).
Related
I have a php while loop that is looping through results, and outputting them into an UL as LI items.
Each new li item has a section with an "open details" button. I'm having trouble getting this "Open details" button to open the hidden panel (which I'm also hiding with jquery).
I can get the panel to work just fine with 1 result, but as I have multiple results, I can get each "open details" button to just open that li item's hidden container.
I am auto incrementing results as each new loop comes in. That way it's doing this "panelopen1" "panelopen2" and so forth with each button in each new li item.
Then I'm just trying to use jQuery to use these newly created li items with their incremented "panelopen" buttons to just select the next element with id="panel" to be able to toggle it show/hide. Panel is hidden by default
$( "li[id^='panel']" ).hide();
$( "p[id^='panelopen']" ).on('click', function (event){
$( "li[id^='panel']" ).toggle();
});
<li class="row bars">
<div class="col-sm-1 btn btn-secondary">
<p id="panelopen$i">details</p>
</div>
</li>
<li id="panel" class="row">
<div class="col-sm-1"></div>
<div class="col-sm-5">
<textarea type="text" name="description">'; echo
$row['description']; echo'</textarea>
</div>
</li> ';
Can't get the open button to just open that panel for that li item, instead all item panels are opening.
I have a 'post' row in my database where all the posted posts are stored.
Each post includes an id, image, title, description. I retrieve it to the main page using a while loop and I want to create a hover effect on each image that will display its corresponding information (the title and the description) based on its id.
I tried a few things with jquery but didn't seem to go anywhere.
Basic version of the database row displayed on html:
<img src="http://www.extremetech.com/wp-content/uploads/2012/12/VWXL1-1024-640x426.jpg" class="post" id="1">
<div class="ad_fade" id="fade1"></div>
<img src="http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/peter-pan-cars-sports-car-hd-wallppers-cool-desktop-images.jpg" class="post" id="2">
<div class="ad_fade" id="fade2"></div>
<img src="http://www.hdwallpapers.in/walls/corvette_mallett_concept_car-HD.jpg" class="post" id="3">
<div class="ad_fade" id="fade3"></div>
in the php code I have each img tag have an id setup like so: id="'.$id.'" where $id is a unique id returned from the database
the styling:
.post{
width:100px;
height:100px;
}
.ad_fade{
display:none;
position:absolute;
margin:-105px 0 0;
width:100px;
height:100px;
background:rgba(255,255,255,0.8);
}
http://jsfiddle.net/g45db/
I am trying to create a similar effect as seen on: http://dribbble.com/
It has to hover the related info for that specific image in a dynamic way.
All help is appreciated!
Try it like,
$(function(){
$('img.post').hover(function(){
$(this).next('div').show().html(this.src);
// you can use ajax to get data from database
});
});
Live Demo
Updated try to use mouseleave on div.ad_fade like
$(function () {
$('img.post').hover(function () {
$(this).next('div').show().html($(this).data('title')); // using title here
// you can use ajax to get data from database
});
$('div.ad_fade').on('mouseleave',function(){ // mouse leave for fadeout div
$(this).fadeOut(1000).html('');
});
});
Updated Demo
You either need container to hold title and description on hover of img, create as two separate divs
Try to store information in img tag as data-title and data-description and then apply onmouse over function of jquery to show hover effects
$('img').onmouseover(function(){
var $this = $(this);
var title = $this.data('title');
// try to append title and description in previously created divs
});
The simplest way to display title and description, use title attribute of img tag like below
<img src="http://www.extremetech.com/wp-content/uploads/2012/12/VWXL1-1024-640x426.jpg" class="post" id="1" title="Title and Description">
And if you want to use jquery then use below code. First populate title and description in each for respective image.
<img src="http://www.extremetech.com/wp-content/uploads/2012/12/VWXL1-1024-640x426.jpg" class="post" id="1">
<div class="ad_fade" id="fade1">Title and Description details</div>
$('img').mouseenter(function(){
$(this).next('.ad_fade').show();
});
$('.ad_fade').mouseleave(function(){
$(this).hide();
});
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.
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();
});
});
I am attempting to write some jQuery code that will expand a paragraph when a link is clicked and once expanded present another link that will allow the paragraph to be collapsed. These paragraphs are all generated within a foreach loop and I am having trouble selecting the correct paragraph because I am not sure of the best way to create unique IDs to pass back to jQuery because there in a loop.
Here is my view code:
<? foreach ($e['comments'] as $comment) : ?>
<div class="comment">
<p class="collapsed">
<?=character_limiter($comment['comment'], 100) ?><br />
Show More
</p>
<p class="expanded">
<?=$comment['comment'] ?>
<a href="#" class="collapse" >Show Less</a>
</p>
</div>
<? endforeach; ?>
And here is what I have so far with jQuery:
$(document).ready(function()
{
$("p.expanded").hide();
$("a.expand").click(function()
{
$(this).parent().hide();
return false;
});
});
I am able to hide the correct when clicking "Show More", however I am lost as to choosing the correct "expanded" paragraph and then implementing the opposite for collapsing.
My thoughts so far are that I need to somehow make the elements in question have unique ideas. The $comment array does have an 'id' value that code be appended to an id name for each attribute making them unique, but I am still confused about how to properly select things with jQuery.
IDs aren't the only way to target individual elements - you can target elements around the current jQuery element using a variety of methods, just like you have with parent.
You should be able to target the corresponding "expanded" block using siblings():
$("a.expand").click(function()
{
$(this).parent().hide();
$(this).parent().siblings('.expanded').show();
return false;
});