php code: the following code is
<div id="code'.$row->nid.'" class="cptext" rel="'.$url.'">'.$row->node_value.'</div>
<div id="cd'.$row->nid.'" style="display: none; border: 1px solid #ccc; ">test test</div>';
the above code will generate id's like this: code1, code2, code3, code4, code5, ...
now, in my js file i want to use the id value.
function init() {
clip.setHandCursor( true );
$('this i want to put the id value in which from the above').mouseover( function() {
}
You can access them in jQuery by using the Attribute Starts With selector. My example will select the ones with an ID that starts with code.
$('[id^="code"]').whatever();
jsFiddle Demo
But I'd say it would be nicer and more logical to give these elements a class they share, so you could easily do selections.
<div id="code'.$row->nid.'" class="cptext code"...
and then just $('.code')....
var theId = $(this).attr('id');
You can just look up the jquery documentation (or google for instance?)
Using jquery, $('#code1').text() will give you the text value.
UPDATE based on updated question:
Since you already have a class set:
$('.cptext').mouseover( function() {...} );
<script type="text/javascript">
var myid = <?php echo $row->nid; ?>;
</script>
Related
I am trying to fade a div using this code:
Javascript:
<script type="text/javascript">
function show(id) {
//document.getElementsByName(id)[0].style.visibility = "visible";
document.getElementsByName(id)[0].fadeTo( "slow", 0.5 );
}
function hide(id) {
document.getElementsByName(id)[0].style.visibility = "hidden";
}
</script>
html:
<div style="width: 80px; height: 20px; background-color: red;" onmouseover="show('hej')" onmouseout="hide('hej')">
<div id="div1" Name="hej" class="hej">Text</div>
</div>
I have included:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
And I get the error "TypeError: Object # has no method 'fadeTo' ".
Anyone who can help with fixing this and explain why it doesn't work?
Javascript DOM elements do not have fadeTo method, you need to wrap it with jQuery
$(document.getElementsByName(id)[0])
or do this
$('[name="'+id+'"]').eq(0).fadeTo(
Because you are targeting a DOM element and trying to call a jQuery method on it. You need to select the DOM object and put it in a jQuery collection:
function show(id) {
$('[name='+id+']').fadeTo("slow", 0.5);
}
function hide(id) {
$('[name='+id+']').hide()
}
JSFiddle
I've assumed that since you are passing the name to the function, that it is unique, otherwise you'll want to make sure you only target the element within the current context. Something like this would work nicely for you:
JSFiddle
.fadeTo is a method of a jquery object and document.getElementsByName(id) dont return a jquery object.
you can try:
$('[name="'+id+'"]').eq(0).fadeTo( "slow", 0.5 );
Your javascript is wrong :/ - you're trying to apply a jquery function to a javascript object.. which is why you're getting Object# error, instead of a JQuery Object error.
instead of getelementby id, use JQuery selectors.. have a look here:
http://blog.techplusone.com/wp-content/uploads/2012/09/jquery-Api-1.2.png
and book markit, it was a massive help to me before.
function show(id) {
$('#' + id).show('slow');
}
function hide(id) {
$('#' + id).hide('slow');
}
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.
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');;
});
I have a PHP site I'm working on, and need to allow the user to select data and have different data appear on the next DIV (see attached image). Essentially I'd like a DIV (overflow:auto, so it scrolls) to populate using the SQL SELECT statement, and allow a user to click on a list item. That item creates a new SELECT statement for the div to the right, if that makes sense. Any input on the best way to go about this? New to PHP, not HTML/CSS though.
Zach
I think the best way to achieve this is with jQuery (a JavaScript-Library). I is quite easy to use, and if you got the trick, you can do amazing things with it.
For PHP/MySQL, you could use jQuerys Ajax functionalities (see http://api.jquery.com/jQuery.ajax/). Use the callback to display the loaded data (see below).
Here is a very simple example on how to show another div (in which could be more links to select) with dynamic content. If you combine this with Ajax, you should get what you need.
Include jQuery in within head tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
Code for the body:
<!-- First Box: click on link shows up second box -->
<div id="selectOne" style="float: left; margin-right: 10px; border: #666 thin solid; padding: 10px;">
One<br />
Two<br />
Three
</div>
<!-- Second Box: initially hidden with CSS "display: none;" -->
<div id="selectTwo" style="float: left; margin-right: 10px; display: none; border: #666 thin solid; padding: 10px;"></div>
<!-- The JavaScript (jQuery) -->
<script type="text/javascript">
//Do something when the DOM is ready:
$(document).ready(function() {
//When a link in div with id "selectOne" is clicked, do something:
$('#selectOne a').click(function() {
//Fade in second box:
$('#selectTwo').fadeIn(500);
//Get id from clicked link:
var id = $(this).attr('id');
//Depending on the id of the link, do something:
if (id == 'one') {
//Insert html into the second box which was faded in before:
$('#selectTwo').html('One<br />is<br />selected')
} else if (id == 'two') {
$('#selectTwo').html('Two<br />is<br />selected')
} else if (id == 'three') {
$('#selectTwo').html('Three<br />is<br />selected')
}
});
});
</script>
So if you would use jQuerys Ajax-Functionality, you could use something like that (not tested!):
$('#selectOne a').click(function() {
var id = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'getYourData.php',
data: 'thisIsSentToPHPFile='+id,
success: function(msg){
//everything echoed in your PHP-File will be in the 'msg' variable:
$('#selectTwo').html(msg)
$('#selectTwo').fadeIn(500);
}
});
});
The getYourData.php could be:
$id = $_POST['id'];
$query = mysql_query('SELECT * FROM table WHERE id='.$id);
$result = mysql_fetch_assoc($query);
//Now echo the results - they will be in the callback variable:
echo $result['tablefield1'].', '.$result['tablefield2'];
Give it some tries, tweak it a little bit and you should get it working.
The most straightforward way to do this is probably to make the right portion an iframe.
Then each item in the middle list could be a link like so:
Company 2
In displaySubItems.php you would then use the $_GET['company'] value in your select statement to populate the table.
Alternatively you could make use of AJAX methods to populate the table on the right though I'm personally not that familiar with AJAX so I can't tell you more about that. Also I suspect iframes are more widely supported.
EDIT: changed some parts based on one of your comments