I am trying to do some article list, where you can select them using checkbox.
In case you are not sure to select or not, there's option to click on header, and get more information about the article.
I have used this example. So where's the problem ? I don't want to expand articles that I select, just those where I click on header.
JQ script part is OK, because it works fine, it expands / collapses correctly, problem is or in CSS or in HTML, where to place checkbox to see it in header.
I have sample HTML:
<div class="art_list">
<div class="art_head"><div class="art-chk"><input type="checkbox" name="reguser" value="Deki" /></div>Artilk-1 </div>
<div class="art_body">Artikl 1 ima sve</div>
</div>
And this gives me checkbox in the header, but when I check it, it expands the article.
I have tried this also:
<div class="art_list">
<input type="checkbox" class="art-chk" name="reguser" value="Deki" />
<p class="art_head">Artikl-2 </p>
<div class="art_body">Artikl 2 ima sve</div>
</div>
It hides checkbox in the header, and no matter that I've tried putting z-index for art-list, art-head, lower then art-check, I can't see it.
Here is JS:
function hideShowArticles(){
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".art_body").hide();
//toggle the componenet with class msg_body
$(".art_head").click(function()
{
$(this).next(".art_body").slideToggle(600);
});
});
}
So what am I missing ?
I need:
[X] Header
and that only click on "header" expands the article, click on checkbox, selects the article without expanding it. Click on header expands the article below checkbox and header, that remain above whole description.
Is this right?
http://jsfiddle.net/chrismackie/S3rWC/
Is this what your trying to do?
http://jsfiddle.net/chrismackie/srG5k/
Related
I have a PHP script labeled first_page.php. On that page, I currently have a div that looks like this:
<div id="status">
<h3>To view a list of all rooms statuses, select the link below.</h3>
Show Status
</div>
And links to the correct page, response_data.php. What i'd really like to have instead, is a button that is on the first_page.php, and when that button is clicked, have it load the response_data.php page with .fadeIn().
I've tried to get this jQuery script working, with no luck. Here is what I have tried. I've changed my html to look like this:
<button id="button">Click here to show data</button>
<div id="data" style="display: none;">
<?php include 'response_data.php' ?>
</div>
$('#button').click(function() {
$('#data').fadeIn(1000);
});
Above, I have added a button and a div that I wanted to fadeIn. The div holds the php script, so I wanted the div to fade the php script in. I set the data CSS to display none. When I click the button, nothing happens. It actually works, but the div data fade's in without having had the button clicked. Then the button remains. I'd like it to not auto click, and also somehow hide the button after the first click.
The jQuery part is just fine. I highly suggest to check that your div#data actually has some text in it.
To do so, you can try something like:
console.log($('#data').text().length > 0 ? 'Text found' : 'Could not find text');
Also, to hide the button after it was clicked simply use the hide() method:
$('#button').on('click', function() {
$('#data').fadeIn(1000);
$(this).hide();
});
Note: You can also use the fadeOut() method or the remove() method if you wish to remove the button from the DOM.
What is procedure to make it like this ? please view the link below
Before i right click the checkbox :
http://i.stack.imgur.com/iAr8G.png
After Right click the checkbox :
http://i.stack.imgur.com/2Jphe.png
*how can i do like that?
*how can i implement it using radio form fill?
*how can i appear and hide the other form fill?
first of all take your captcha box into one DIV. for example <div id="captcha"></div>.Put your captcha box into this div. Then give the ID property to your checkbox for example, <input type="checkbox" id="chk" name="chk"/>.
Then after add following line in the head section.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Then put below jquery under the <input type="checkbox" id="chk" name="chk"/>
<script>
$('#chk').on('click',function(){
if($('#chk').prop('checked'))
{
$('#captcha').hide();
}
else
{
$('#captcha').show();
}
});
</script>
Don't forget to change name and all that according to your requirement.
Demo: http://jsfiddle.net/rtvK7/
To do this via radio click on following link for demo.
http://jsfiddle.net/rtvK7/1/
Use jquery toggle for the captcha div you are using, use the jquery event " $('#myform :checkbox').click() " for initiating the toggle, i suppose this will help.
I have a php page holding a data grid generated by jQuery lets say dataGrid.php
and 2 divs on the home page some thing like this
dataGrid.php
<script>
generate the grid
</script>
<body>
<lightbox><div> close me </div>
<div > holding the dataGrid </div>
</lightbox>
</body>
NOTE: I mean a popup box when I say this is not a real valid HTML tag I am using
and here is the home page
<body>
<div> click here to see the grid </div>
<div> <?php include dataGrid.php ?></div>
</body>
I have a close button on dataGrid.php. I am closing the include using jQuery remove() but remove() refreshes the home page which is what I don't want. I am also not sure id remove() command is really cross browser?
My question: Is there any way or method to close dataGrid.php and the light-box without refreshing the home page?
I have checked 3 other questions posted on stack-overflow with the same question title but different in the question body.
If your close button is interactive (i.e. a hyperlink) you'll need to call preventDefault() on the event to prevent the browser from treating it as interactive.
Before I begin it's worth reiterating what I said in my comment on this question: <lightbox> isn't a valid HTML element and will fail validation tests. For this answer, however, I'm going to use this as this is given the code you've provided.
Assuming your code is something like this:
<lightbox>
Close Me
...
</lightbox>
You'd prevent the hyperlink from functioning by passing in the event and calling event.preventDefault():
$('lightbox').on('click', 'a.close', function(event) {
event.preventDefault();
$('lightbox').remove();
});
Alternatively you can simply change your close button to something which isn't interactive, like a span for example:
<lightbox>
<span class="close">Close Me</span>
...
</lightbox>
$('lightbox').on('click', 'span.close', function() {
$('lightbox').remove();
});
For those who have it with an onclick, and doesn't know if the event is reachable within the function:
<button class="remove-form" onclick="remove_form(this);">Remove this form</button>
function remove_form(button){
jQuery(button).parent().remove();
event.preventDefault();
}
I am in a little trouble here. The solution my be easy but no idea clicked till now. I have a text area to be filled by the user with ckeditor. if incase the text is too long, i used php to split the content before rendering and i would added a see/hide more action using jquery toggle effects. a minor work around may be:
if the text was
Appropriate length text here.Other hidden texts here.
it would be
<div class="show always">Appropriate length text here.</div>
<div class="togglehidden1">See more</div>
<div class="hidefirst" style="display:none">Other hidden texts here.</div>
<div class="togglehidden2" style="display:none">Hide more</div>
but the deal here is the ckeditor actually puts a whole lot of html stuffs here, in real the the string we receive is completely unthinkable of. for e.g.:
<div><p><b>Appropriate</b> length text here.</p></div><div>Other hidden texts here.</div>
using the same method to split and insert some see more actions then it would be
<div class="show always"><div><p><b>Appropriate</b> length</div>
<div class="togglehidden1">See more</div>
<div class="hidefirst" style="display:none">here.</p></div><div>Other hidden texts here.</div></div>
<div class="togglehidden2" style="display:none">Hide more</div>
so, only this div is hidden
<div class="hidefirst" style="display:none">here.</p></div>
and this section here is left seen.
<div>Other hidden texts here.</div></div>
please suggest. am i doing it the wrong way?
Here is a working fiddle.
The HTML code
<div class="show always">
<div><p><b>Appropriate</b> length here.</p>
<div class="togglehidden">See more</div>
</div>
</div>
<div class="hidefirst">
<div>Other hidden texts here.</div>
</div>
The jQuery code (using the slideToggle() to create an animation)
$(document).ready(function() {
//hide the content when the document is ready
$('.hidefirst').hide();
//on clicking the See more/Hide More toggle the visible state of element
$('.togglehidden').bind('click', function() {
$('.hidefirst').slideToggle(function() {
// if element is visible change the text to Hide more
if ($(this).is(':visible'))
$('.togglehidden').html('Hide more');
// else change the text do See more
else
$('.togglehidden').html('See more');
});
});
});
Bind the click event to the .togglehidden class
Use the slideToggle() to show/hide the content of .hidefirst
In the slideToogle callback check if the content is visible and set
the appropriate message.
Hope it helps.
I have a button (styled as button with CSS). Next to it is an input field. I would like the button value to change dynamically as the user types a value in the textfield. What is the simplest way to do this?
My form:
<form>
<div class="span-3" id="bid_btns">
<div id="bid_button">
<?php echo $somethingwhichshouldchange; ?>
</div>
</div>
<div class="span-3 last" id="bid_btns">
<div id="bid_field">
<input type="text" class="title" name="bid_field" id="bid_field" maxlength="5"/>
</div>
</div>
</form>
PHP is a server side language, so you'll never be able to change a variable locally without re-serving the page. You need to investigate javascript to do what you're doing.
If you want to make the button label/value change as you type, PHP is not going to help. You need a script running in the browser - JavaScript. If you use jQuery (you did ask for the simplest way, and jQuery makes this much simpler), you need some code to change the button as the input value changes.
$(document).ready(function() {
$("#bid_field").keyup(function(){
$("#bid_btns").text($(this).val());
});
});
This bit of code will change the html inside the #bid_btns button to whatever is typed into the #bid_field input. If you're not familiar with jQuery, you can learn more by reading this article: http://docs.jquery.com/How_jQuery_Works
Note - edited per BenM's siggestion.
You can use jQuery to achieve this. You just need to bind a function to the onkeyup event:
http://jsfiddle.net/Vt6N9/