So I have several divs that i assigned a class to. Each div has a header. The contents underneath each header are dynamically generated via php. Certain times of the year these divs contain no information but the header still displays. I want to hide the divs that do not have any paragraphs inside of them I cannot quite get them to work and I have a feeling it has to do with the paragraphs being generated by php.
EXAMPLE:
<div class="technology_connected article_headers">
<h3>TECHNOLOGY CONNECTED</h3>
<?php echo $tools->article_formatter($articles, 'Technology Connected'); ?>
</div>
Here is my Jquery code.
$(document).ready(function() {
$(".article_headers").each(function() {
if ($(this).find("p").length > 0) {
$('.article_headers').show();
}
});
});
Try this:
$(document).ready(function() {
$(".article_headers").each(function() {
if ($(this).find("p").length > 0) {
$(this).show();
}else{
$(this).hide();
}
});
});
DEMO
As noted by #JasonP above, this really should be done server side. However, since you do want it done server side, you can simplify the process greatly. Generate the data server side as you're doing. Make sure all <div> tags are visible. Then in your JavaScript use the following selector:
// Shorthand for $(document).ready(function() { ... });
$(function () {
$('.article-headers:not(:has(p))').hide();
});
The selector above targets all elements with the class .article-headers that do not contain a <p> tag and hides them.
JSFiddle demoing the above as a toggle button to show or hide the no paragraph sections.
Related
So if i have a small layout stored in example.blade.php, How do i use it in jquery ?
I want to include certain elements such as textboxes when a particular radio button is checked otherwise not.
Example:
$("document").ready(function(){
if ($("#role").prop( "checked")) {
$("#content").html(#include('layouts.nav'));
}
else
{
$("#content").html('');
}
});
The above code does not work so please provide some solution.
You can not do that. #include() is Blade and will be interpreted by PHP while JS runs in the browser. The Blade directives are already interpreted by PHP when the code hits the browser
You can create a hidden div in your view and then use jquery to get it's html content, here is an example:
<div class="layouts-nav" style="display:none;">
#include('layouts.nav')
</div>
<script>
$("document").ready(function(){
if ($("#role").prop( "checked")) {
var layoutNav = $('#layouts-nav').html();
$("#content").html(layoutNav);
}
else
{
$("#content").html('');
}
});
<script>
I have the following jQuery code to toggle the view of more information in a div.
$(".expandCollapse").click(function () {
var bidValue = this.id,
expandArea = $("#"+bidValue+'_status')
expandArea.slideToggle(500);
});
The code works to toggle the view of displaying more information when the submission header is clicked. The div IDs of $moreInfo are dynamically created.
$moreInfo = $bidValue.''."_status";
echo "<div class='expandCollapse' id='$bidValue'>Submission</div>";
echo "<div id='$moreInfo'>$displayComments</div>";
However I want to open only one view/div at a time. If a div is open when a submission is clicked it should be closed before the other one is opened.
I've tried several things but it closes or hides all divs. Searching the web only show a solution using anchor tags.
Any thoughts...?
Thanks.
To achieve this you can put a common class on the second div element to allow you to hide them all before showing the next, like this:
echo '<div id="$moreInfo" class="expand-area">$displayComments</div>';
$(".expandCollapse").click(function () {
var bidValue = this.id,
expandArea = $("#" + bidValue + '_status').slideToggle(500)
$('.expand-area').not(expandArea).hide();
});
Also note that you can make your code much more simple and generic by usnig DOM traversal to select the elements, instead of building selector strings based on related id attributes, like this:
$(".expandCollapse").click(function () {
var expandArea = $(this).next('.expand-area').slideToggle(500);
$('.expand-area').not(expandArea).hide();
});
The code above assumes that the elements are siblings, but you can easily amend the next() to traverse however is required.
Assuming the header and content divs are siblings you may use:
$(.expandCollapse + div)
// All <div>s that are immediately after an .expandCollapse
$(".expandCollapse").click(function () {
var bidValue = this.id,
expandArea = $("#"+bidValue+'_status')
expandArea.slideToggle(500);
$('.expandCollapse + div').not(expandArea).hide();
});
$('[id$="_status"]').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='expandCollapse' id='bidValue1'>Submission1</div>
<div id='bidValue1_status'>displayComments</div>
<div class='expandCollapse' id='bidValue2'>Submission2</div>
<div id='bidValue2_status'>displayComments</div>
<div class='expandCollapse' id='bidValue3'>Submission3</div>
<div id='bidValue3_status'>displayComments</div>
I'm newbie at Jquery. I want to make floating menu at my web site. I created div which is id="item"
Below code is in my .php file also I want to activate item after pressing my button which is id='sidebarOpenfile'.
<div id="item" style="float:left">
<?php include("leftmenu.php"); ?>
</div>
and my 'sidebarOpenFile' code is here
<button id="sidebarOpenfile" class="toolbarButton" title="Toggle OpenFile" tabindex="5" data-l10n-id="toggle_sidebar_openfile">
<span data-l10n-id="toggle_openfile_label">Toggle OpenFile</span>
</button>
Also My .php file has viewer.js file and .css file.
I wrote my .js file this code
document.getElementById('sidebarOpenfile').addEventListener('click',function() {
alert("Its working"); // For sure whether event is working or not working,
This code works and gets alert
$("#item").css('visibility','visible');
});
Also I wrote my .css file this codes
#item {
position:absolute;
top: 10px;
width: 200px;
bottom: 0px;
background:orange;
left:0px;
visibility:hidden;
}
Normally, After pressing button It changes item's css visibility from hidden to visible. But It seems not working and does not effect.
For any helping I'll be appreciated.
For toggling visibility on click it's as easy as it can get. You don't need any pure javascript, just a (very) little jQuery:
<script>
$('#sidebarOpenFile').click(function() {
$('#item').toggle(); });
</script>
The toggle() function toggles the display state of the queried #item.
To just hide or just show you can use:
$('#sidebarOpenFile').click(function() {
$('#item').show(); // or $('this').hide()
}
For the sakes of convention, it should be wrapped in a self-invoking anonymous function like:
(function(){
$('#sidebarOpenFile').click(function() {
$('#item').toggle(); });
})();
OK... I'll bite... first problem is the:
document.getElementById('sidebarOpenfile').addEventListener()
It is far easier in JQuery to just reference this with $('#sidebarOpenfile'), for starters... but the real problem that I am having is that I can't find 'sidebarOpenfile' anywhere in the rest of your code; the id of the div you appear to be trying to effect is 'item', not 'sidebarOpenfile'.
This might very well be your issue.
The other possibility is that you actually have the proper id in the php code, which you didn't display.
UPDATE
Ok... my bad, not enough sleep.. you were tight, the id is there, and in the correct place.
$('#sidebarOpenfile').click(function(){$("#item").css('visibility','visible')});
This should work... but will only display the element.
If you wish it to toggle, you have to add a little extra:
$('#sidebarOpenfile').click(function()
{
if ($('#item').css('visibility')=='hidden')
{
$('#item').css('visibility', 'visible');
}
else
{
$('#item').css('visibility', 'hidden');
}
});
Could you use something like:
$('#item').fadeToggle("fast", "linear"); //this will toggle the visibility back and forth and do it gradually
or
$('#item').removeAttr('visibility'); //this will simply remove the visibility attribute thus making it visible by default
Try this:
$('#item').on('click', function(e){
$(this).css('display','none');
});
You can toggle element's visibility property with this simple jQuery script:
$(document).ready(function () {
var item = $('#item');
$('#sidebarOpenfile').click(function() {
if (item.css('visibility') == 'visible') {
item.css('visibility', 'hidden');
} else {
item.css('visibility', 'visible');
}
});
});
jQuery fiddle vs javascript fiddle
My goal is to have a button on each side of my iframe (which contains a calendar) which toggles back and forth between calendar #1 and calendar #2 in a single iframe.
Any suggestions?
|arrowLeft| |-----Iframe-------| |arrowRight|
The code works in jsfiddle but doesn't work when I put all the code into my website.
Why is that?
HTML:
<p id="toggle">
<span> Left </span>
<span> </span>
</p>
<div id="left"> <iframe>LEFT CONTENT</iframe> L</div>
<div id="right"> <iframe>RIGHT CONTENT</iframe>R </div>
<p id="toggle">
<span></span>
<span> Right </span></p>
CSS:
#right { display:none; }
Script:
$('#toggle > span').click(function() {
var ix = $(this).index();
$('#left').toggle( ix === 0 );
$('#right').toggle( ix === 1 );
});
Since you say you have loaded jquery..
Probably your onclick setter (the jquery code) is run before the document is loaded (and as such there are no elements in document.body at that moment to set).
In jsfiddle ('No-Library' pure JS) code is wrapped (by default) in:
window.onload=function(){
// your code here
};
That should already do the trick.
This is what jsfiddle does when you select the (default) option 'onLoad' in the options panel on the left, under "Frameworks & Extensions".
If you would select 'onDomready' then your code would (currently) be wrapped in a function called VanillaRunOnDomReady, like this:
var VanillaRunOnDomReady = function() {
// your code here
}
var alreadyrunflag = 0;
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", function(){
alreadyrunflag=1;
VanillaRunOnDomReady();
}, false);
else if (document.all && !window.opera) {
document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
var contentloadtag = document.getElementById("contentloadtag")
contentloadtag.onreadystatechange=function(){
if (this.readyState=="complete"){
alreadyrunflag=1;
VanillaRunOnDomReady();
}
}
}
window.onload = function(){
setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}
Note that this eventually still ends up in a window.onload like the 'onLoad' option.
If you'd load library JQuery 1.9.1 then things change (a little).
The option 'onLoad' then wraps your code like this:
$(window).load(function(){
// your code here
});
Note that this is essentially still the the same as the first option in this answer, but then in the JQuery way.
If you'd select the option 'onDomready' (whilst the JQuery library is loaded in JSFiddle), then your code would be wrapped in:
$(function(){
// your code here
});
As ErikE pointed out in the comments below, since you already load and use JQuery you might also want to use yet another JQuery way:
$(document).ready(function() {
// your code here
});
Finally as ErikE also pointed out in his comment to your question (a serious problem I overlooked), id's are meant to be unique. Whereas you gave to both paragraphs the id "toggle".
You should instead give them the class "toggle" and select the elements by class to assign the onclick function.
i dont know, how to chance this script to jQuery, please help
JavaScript
function show_t(id){
document.getElementById("hide_t_"+id).style.visibility='visible';
}
function hide_t(id){
document.getElementById("hide_t_"+id).style.visibility='hidden';
}
this is div element on php, with above script
<div class='item' onMouseOver="show_t('$dataBB[0]')"
onMouseOut="hide_t('$dataBB[0]')">
I have trouble, when I change with this script
$("#show_t1"+id).mouseover(function(){
document.getElementById("hide_t_"+id).style.visibility='visible';
}).mouseout(function(){
document.getElementById("hide_t_"+id).style.visibility='hidden';
});
the div element for script on above is
<div id="show_t$dataBB[0]">
<span id='hide_t_$dataBB[0]' class='hide_input'>
</span>
</div>
You can see what I means in www.tumbasklik.com
Change
document.getElementById("hide_t_"+id).style.visibility='visible';
To
$("#hide_t_"+id).css('visibility','visible');
Your code would be.
$("#show_t1"+id).mouseover(function(){
$("#hide_t_"+id).css('visibility','visible');
}).mouseout(function(){
$("#hide_t_"+id).css('visibility','hidden');
});
Edit: You can change your selector to use wild cards instead of feeding id, and using class of span instead of generating the id.
Live Demo
$("[id^=show_t]").mouseover(function() {
$(this).find('.hide_input').css('visibility', 'visible');
}).mouseout(function() {
$(this).find('.hide_input').css('visibility', 'hidden');
});
Step By Step
There is no need of onMouseOver and onMouseOut function in .item divs. Remove them. No need to pass values from php
Make your spans meaningful - instead of putting class hide_item to all spans, put class as buy-option hidden. Do all the styles to .buy-option { /* Styles */ } and put .hidden { display: none; }
Change jQuery code to this much only:
jQuery(function($) {
$('div.item').mouseover(function() {
$(this).find('.buy-option').removeClass('hidden');
})
$('div.item').mouseout(function() {
$(this).find('.buy-option').addClass('hidden');
});
});
Check Working fiddle and copy paste code from respective iframes (HTML, CSS, JS)
Start Learning jQuery starting from DOM traversal
with Jquery -
$("#hide_t_"+id).hide();
$("#hide_t_"+id).show();
Try like this-
$("#show_t1"+id).mouseover(function(){
$(this).show();
}).mouseout(function(){
$(this).hide();
});
demo
$("#show_t1"+id).mouseover(function(){
$("#hide_t_"+id).css('visibility','visible');
}).mouseout(function(){
$("#hide_t_"+id).css('visibility','hidden');;
});