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.
Related
How can I get the value of the calendar date selected, once selected it should navigate to a php page where I use the value of selected date in the php page to run the query, so far the date selected only displays in the textfield.
eg:
PHP page - date selected is 2015-08-11
Open up URL to another PHP (in same tab)
Use date selected for query ($selected_date = $_GET["DATE"])
This is the calendar view code:
function setupCalendars() {
// Embedded Calendar
Calendar.setup(
{
dateField: 'embeddedDateField',
parentElement: 'embeddedCalendar'
}
)
// Popup Calendar
}
Event.observe(window, 'load', function() { setupCalendars() })
</script>
<div style="float: center; width: 50%">
<div id="embeddedExample" style="">
<div id="embeddedCalendar">
</div>
<br />
<div id="embeddedDateField" class="dateField">
Selected Date...
</div>
<br />
</div>
</div>
</div>
</div>
it is embedded in the another file (date is selected from this file)
<li><i class="icon-calendar scolor"></i> Date
<object type="text/html" data="http://<website>/calendarview.html"
style="width:200%; height:310px; margin-right:50%">
</object>
</li>
To do that you're going to have to get the selected date from the child page (is it an iFrame?) and send its value to a field in the parent form when the date is selected. There are a number of ways to do this; you may want to try using the .contents() method located here. There's a sample provided that traverses links in an iframe. You should be able to do the same with the textbox.
When see more button is clicked, second passage shows but there is a gap in between them as per shown in the screenshot. I want the second passages to continue with first one
function ClickParent(ClickElem,ElemFind)
{
$("."+ClickElem).click(function() {
var GetGrp = $(this).parents(".group");
GetGrp.find("."+ElemFind).fadeToggle();
});
}
// Find one level
ClickParent('name','moreinfo');
// Find another level
ClickParent('moreinfo','evenmore');
<div class="group">
How are you?
<div class="moreinfo" style="display: none;">
Fine
</div>
<div class="evenmore" style="display: none;">
Even more stuff.
</div>
</div>
How to get result from How are you?? Fine answer should be next to the question with no space.
I get now what you want for your project. You wanted a "Read more" function for your articles.
Using <div></div> to hide your continued text/string causes a new line. You can just replace it with <font></font>.
<!-- FIRST ARTICLE -->
<div class="group">
This is the first article that would
<font class="evenmore" style="display: none;">
show more information about this first article.
</font>
<div class="moreinfo">
See more
</div>
</div>
<!-- SECOND ARTICLE -->
<div class="group">
This is the second article that would
<font class="evenmore" style="display: none;">
show more information about this second article.
</font>
<div class="moreinfo">
See more
</div>
</div>
Then let us create a script that when "See more" is clicked, it will hide this "See more" and would show the content inside <font></font>.
$(document).ready(function(){
$(".moreinfo").click(function(){ /* WHEN SEE MORE IS CLICKED */
var elem = $(this);
$(this).fadeOut(200).hide(); /* HIDE THE CLICKED SEE MORE */
elem.closest("div.group").find('font.evenmore').fadeIn(200).show(); /* SHOW THE CONTENT OF THE CLOSEST FONT */
});
});
Here is a fiddle. But if you want to hide the shown details, we can add a "Show Less". Check this second fiddle.
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 want create a list of button, for example a number X mini-balls, based on a number X of divs into a container. I want this:
∞ ∞ ∞ ∞
based on a number of divs.
and each of this button has a position of each div (with animation scroller) and if I click one of items I'll go to this position linked to div.
For example:
<div id="scroller">
<div id="content">number1</div>
<div id="content">number2</div>
<div id="content">number3</div>
</div>
And I've:
<ul>
<li><div id="ball"></div></li>
<li><div id="ball"></div></li>
<li><div id="ball"></div></li>
</ul>
So if I click on third "mini-ball", I'll go to position of div "number3".
I hope that you understand!
You cannot give same Ids to different elements!!
basically you need to show a specific division upon click of a specific button. There are many ways to go about this.
All of these many methods, would require you to do one thing, detect the particular button click and deduce the div to be shown
Below am showing you world's simplest sample (for the sake of it)..it should give you an idea:
respective html:
<body >
<ul>
<li><div id="ball1" data-target="content1">button 1</div></li>
<li><div id="ball2" data-target="content2">button 2</div></li>
<li><div id="ball3" data-target="content3">button 3</div></li>
</ul>
<div id="scroller">
<div id="content1" class="number">number1</div>
<div id="content2" class="number">number2</div>
<div id="content3" class="number">number3</div>
</div>
</body>
respective jquery code:
<script type='text/javascript'>
$(document).ready(function(){
$('ul').find('li').find('div').click(function(){
var target = $(this).attr('data-target');
$('#'+target).slideToggle(1000);
});
});
</script>
respective style:
<style>
.number
{
display:none;
}
</style>
I have some HTML menus, which I show completely when a user clicks on the head of these menus. I would like to hide these elements when the user clicks outside the menus' area as well as clicking on myaccount section again.
Here is the code,
<li onclick="san()">
<div id="topnav"><a id="displayText" href="#" class="signin">My Acount</a></div>
<div id="topnav1" style="display:none;"><a id="displayText1" href="#">My Acount</a></div>
</li>
<div id="signin_menu" style="display:none;">
<div class="droptop"></div>
<div class="maindropsign">
<div class="header_box">My Acount</div>
<div class="txt_drop">My Profile</div>
<div class="txt_drop">My Backer History</div>
<div class="txt_drop">Edit Settings</div>
<div class="txt_drop_log">Log Out</div>
</div>
<div class="dropbut"></div>
</div>
<script language="javascript">
function san()
{
if(document.getElementById('signin_menu').style.display=='')
{
document.getElementById('signin_menu').style.display='none';
document.getElementById('topnav1').style.display='none';
document.getElementById('topnav').style.display='';
}
else
{
document.getElementById('signin_menu').style.display='';
document.getElementById('topnav1').style.display='';
document.getElementById('topnav').style.display='none';
}
}
</script>
Please help me to do this.
You have to remember the state of the menu first, like set var open = true when its open. Then make a function that 'toggles' and bind that to the onClick event of your menu-head. Then either bind a closeMenu function on an onClick event directly to your whole document or on an onMouseOut from your menu (you can even build a delay here).