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');;
});
Related
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.
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 was working on a tooltip from scratch. The code for the tooltip has been added below.
Issue with following code:
The tooltip fades in and out on focussing or blurring on the text-area but the problem is, all the tooltips (tooltips corresponding to all the elements) fade in and out simultaneously.
The second issue is that the value of the text-area is same in all the tooltips which is the value of the first text-area.
PHP
<?php for($j; $j<5; $j++) { ?>
<tr>
<td style="position:relative"><?php echo CHtml::activeTextArea($PackageDeal,"package[$j][1]") ; ?>
<div style="color:#0D776e;font-size:15px;font-family:calibri;padding:1%;margin:0 0.5%;;word-wrap:break-word;display:none;z-index:100;width:200px;mion-height:25px;position:absolute;top:30px;"></div>
</td>
</tr>
<?php }?>
Jquery
<script src="jquery-1.8.3.min.js"></script>
<script>$(document).ready(function(){
$("textarea").focus(function(){
$("td div").fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"});
$("td div").html($("textarea").val());
});
$("textarea").blur(function(){
$("td div").fadeOut(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"});
});
$("textarea").keyup(function(){
$("td div").html($("textarea").val());
});
});
</script>
The issue is that I'm using this tooltip in a PHP for loop and I tried variety of ways so that the tooltip is functional. I need to ask whether I should keep an Id / Class for the tooltip (div element) and for the text-areas so that the text shown is different in all and all of them don't show up simultaneously. Also I would like to know whether this is a jquery, php or html related issue. Thanks in Advance!
P.S. the tooltip works fine for single element.
Because your page would have a lot of <td><div></div></td>s from generated HTML (by PHP), and all matches td div, all of them would show if you were to call $('td div').//so on
So you need to specify which one you want to show, and in your case you want the one near to the element that is focused or blurred. jQuery is good at that.
$("textarea").focus(function(){
var targetArea = $(this);
targetArea.siblings('div').fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"})
.html(targetArea.val());
});
Also, as per #joeltine answer, you also need to show only the html for that textarea too, so also use the same $(this) in your html call parameter.
For performance, you may want to chain them together and cache $(this) to a variable as above too - the $ constructor is expensive.
And one more thing, you seem to set css when it fades in and fades out, but they are not necessary - when you can set it in a css file instead. Their style can't be seen if you set it beforehand and they are not shown (by display: none) anyway.
$("textarea").focus(function(){
var targetArea = $(this);
targetArea.siblings('div').fadeIn(400).html(targetArea.val());
});
and in CSS:
/* You really want to apply this css to all "td div" for this one! */
td div {
background-color: #E7F1F0;
border: 1px solid #86BBB6;
/* More styles for tooltips, such as display: none; position: relative; etc... */
}
#luiges90 addressed your one issue... and I'll also mention the reason your tooltips are all showing the same value (the value in the first text area on the page) is because your selector $('textarea') is selecting ALL the textareas on the page. When you call .val() on that, by default, it only returns the value of the first element in the collection. So in short, in your focus event just use something like this:
$("textarea").focus(function(){
var $this = $(this);
$this.siblings('div').fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"})
.html($this.val());
});
Use a class for your textarea, i.e. myTxtArea and use $(this) like
$("textarea.myTxtArea").focus(function(){
var el=$(this);
el.closest("td").find("div").fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"});
el.closest("td").find("div").html(el.val());
});
An Example Here.
This is what I was talking about:
HTML
<table>
<tbody>
<tr>
<td>
<textarea class="editable">This is a texarea.</textarea>
<div class="uneditable"></div>
</td>
</tr>
... More rows ...
<tr>
<td>
<textarea class="editable">This is a texarea.</textarea>
<div class="uneditable"></div>
</td>
</tr>
</tbody>
</table>
jQuery
Note the use of textarea.editable, text.uneditable, $(this).siblings('.uneditable'), and $(this).next('div.uneditable'). The div.uneditable is a little gratuitous here, but I offer it as a demonstration of overselecting (in case there were also a span.uneditable or whatever next in flow with the div.uneditable...).
$(document).ready(function () {
var $editable = $('textarea.editable');
$editable
.focus(focus)
.blur(blur)
.keyup(keyup);
function focus() {
$(this).siblings(".uneditable").fadeIn(400).css({
"background-color": "#E7F1F0",
"border": "1px solid #86BBB6"
})
.html($(this).val());
}
function blur() {
$(this).siblings('.uneditable').fadeOut(400).css({
"background-color": "#E7F1F0",
"border": "1px solid #86BBB6"
});
}
function keyup() {
$(this).next("div.uneditable").html($(this).val());
}
});
http://jsfiddle.net/fuFuT/
The reason why all of them go at the same time, is because you select all of them, $("textarea") returns all matching elements.
To prevent that behaviour, create this (I didn't include the event functions for readability)
// Do things for each matching elements, separately
$("textarea").each(function() {
$(this).focus();
$(this).blur();
$(this).keyup();
});
As for the id / class for the tooltip: it is generally better to keep the CSS external, so in that case, giving the tooltips a CSS class would be better.
Im using the following to open/close a div
$(".alerts").click(function(){
$(this).toggleClass("active").next().slideToggle(50);
But I want a certain function to trigger only if the box was closed and is being opened, how can I determine this? I prefer not to use cookies or anything like that
thanks!
You can use the visible selector with the is method like this -
$(document).ready(function()
{
$(".alerts").click(function()
{
if($(this).toggleClass("active").next().is(":visible"))
alert("It's visible");
$(this).toggleClass("active").next().slideToggle(50);
});
});
An example on jsfiddle.
The -
if($(this).toggleClass("active").next().is(":visible"))
alert("It's visible");
portion is checking to see if the next element of this is visible or not. If it is, then it returns true. As a result, the alert method gets executed.
Here is the documentation for the visible selector and here is the documentation for the is() method.
You can add a class to the div and check for it with hasClass():
$('.alerts').live('click', function() {
if($(this).hasClass('active')) //close
$(this).removeClass('active').next().slideUp(50);
else //open
$(this).addClass('active').next().slideDown(50);
});
When checking for DOM elements/attributes that have been changed by Javascript, use live() rather than e.g. click().
If your .alerts element has a different CSS style when it has the .active class, you should run the addClass() and removeClass() functions after the slide events have completed, like so:
//same thing, but wait for animation to complete
$('.alerts').live('click', function() {
var thisbtn = $(this);
if(thisbtn.hasClass('active')) { //close
thisbtn.next().slideUp(50, function() {
thisbtn.removeClass('active');
});
} else { //open
thisbtn.next().slideDown(50, function() {
thisbtn.addClass('active');
});
}
});