I have the user profile picture inside a table having 100px for height and width.
I also have radio buttons to set visibility of the profile picture (public, Private, etc.). These are updated using ajax.
What I want to know is how can I show a image (e.g. "success.png") right above the profile picture and fade it out after 2 seconds?
<table class="profimg">
<tr><td align="center"><img class="profimg" src="../images/user/profile/1c4ca4238a0b923820dcc509a6f75849b1.jpg" alt="Administratorasdf" /></td></tr>
<tr><td align="center"><input type='radio' title='Publicly Visible' name='img_pub' onclick="upimg1()" /> <input type='radio' title='Visible Only To Users' value='UsersOnly' name='img_pub' onclick="upimg2()" /> <input type='radio' title='Visible Only To You' value='Hide' name='img_pub' onclick="upimg3()" checked='checked'/></td></tr>
</table>
I have added an img tag with the ID 'success'. This tag is the image that fades in and out.
$("#rad").click(function () {
$("#success").fadeIn(500).delay(1000).fadeOut(1000);
});
dont forget to include the jquery library.
Check this demo
<script type="text/javascript">
$(document).ready(function(){
$(".profimg").click(function(){
$("this").slideToggle("slow");
});
});
</script>
Don't forget to use jquery library.This will not take 2 seconds. But it'll work. you can use settimeout function for time interval. google for it
Related
I have some tags (tagbutton) in a table, each tag has its own id, what I want to achieve is when the user clicks on the tag, a hidden input is created in the form with the value of the div (or tag) that has been clicked on. I also want the clicked div to be copied in the tagselected div.
I have no idea how to do that on jquery. Thank you very much in advance for your help.
<table> <tr>
<td> <div class="tagbutton" id="jazz"> Jazz </div> </td>
<td> <div class="tagbutton" id="classical"> Classical </div> </td>
<td> <div class="tagbutton" id="R&B"> R&B </div> </td>
</tr> </table>
<div id="tagselected"> </div>
<form> <input type="text"> <button ="submit"> Submit </button> </form>
Here is the javascript function that I have to copy the div, however when I clicked on it the entire table is copied
$('#jazz').click(function () {
$('.tagbutton').clone().insertAfter("#tagselected");
});
This code is wrong:
$('#jazz').click(function () {
$('.tagbutton').clone().insertAfter("#tagselected");
});
The problem with this code is that you are retrieving all the items with class tagbutton on the whole page. If your click function is on the item you want then you should be able to just use this to access the clicked item.
so something like :
$(this).clone().insertAfter("#tagselected");
This code is not tested and is just the simple change of the initial jQuery selector.
I assume the problem you have with the hidden fields is the same - that you were selcting all tags instead of just the one you clicked so hopefully this will solve that problem too.
<html>
<body>
<body bgcolor="33FF00">
<script language = "JavaScript">
//-----------------Created Variables Here------------------
timeLeft = 30 //this is counted down from until it hits 0
points = 0 //this is the points system that is added to by 10 each time a duck is clicked
// ----------------Duck Or Sky element-----------------
function duSky(){ //This is a function to tell add points to the points variable if the user clicks a duck.
duckNum = Math.floor((Math.random()*10)+1)
if(duckNum<10){document.write("<img src=images/skyTile.jpg>")}
else{document.write("<img src='images/duckTile.jpg' onClick='duckClick()'")}
}
</script>
<center><img src=images/duckHuntTitle.gif><br> <!Duck Hunt title gif, no background so you can see the background of the page, also centered>
<div name = "tableDiv"> <!Named the table "TableDiv" so that I can refer to it at a later date. This was to try and make my job of refreshing easier>
<table>
<tr>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
</tr> <!Inside of all the table boxes there is a function that designates whether inside will be a duck or sky tile>
<tr> <!This is the duck table that is exactly 1000px wide by 400px height. This is created by 10 200px by 200px boxes, two rows of 5 boxes>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
<td> <script> duSky() </script> </td>
</tr>
</table>
</div>
<form name="score">
Points <input type="text" name="pointsscored" readonly="readonly"> <!This is the box that is centered that displays the points the player has got, also is now readonly so no tweaking is allowed>
</form>
<form name="timer">
Time <input type="text" name="timeBox" readonly="readonly"> <!This is the timer box that is centered as well that displays how long the player has left and is readonly>
</form>
</center>
<script language = "JavaScript"> //Returns the script to JavaScript to allow for functions to be used that are related to the HTML previous to this
document.timer.timeBox.value = timeLeft //Displays the time left before the game has even started and been clicked so the player immediately knows the time that they have to play with
function timeDecrease(){ //This is the timer function that reduces the timer by a second each time to make the game slowly time out after 30 seconds
setInterval(function(){timeLeft-- //I am still working on the refresh function but hopefully it will be corrected to make the table refresh with every 1000 miliseconds
document.timer.timeBox.value=timeLeft;
//document.tableDiv.reload(true) //trying to get the reload function to work.
},1000); //1000 miliseconds, therefore it is 1 second
}
while(timeLeft < 0){alert("Timeeeeeees Up, you scored: ", points ,"points! well done Duck Slayer!")} //Alert to signify the end of the game.
// ----------------Function for clicking the duck-----------------
function duckClick(){
points = points + 10;
document.score.pointsscored.value = points; //when the player clicks the duck, points will be added to the points box
}
</script>
<center>
<form name = "playButton">
<button type="button" onClick = "timeDecrease()">Play!</button> <!This is the on click function that starts the game/countdown feature>
</center>
</form>
</body>
</html>
I have a problem with getting my graph to work. I am currently working on making a simple point and click game and I need the table to refresh to make the images become randomized in the position. The idea is that it refreshes every second, giving the appearance of true randomization from a previous section of the script. The problem is that I can't get the table to refresh even though I have set a div tag and I am using the reload function. I am hoping that you can help me find a solution to this.
Also the website doesn't recognise the document.tableDiv.reload(true) part but I don't understand how to get the table to refresh with every second that goes past.
P.S if you haven't guessed I am awful at coding but hope to get better.
Use jQuery, it will make your life easier as selectors mean you won't have to repeat so much code.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Assign all of the td elements to run duSky() function in a class -- we'll also take the script out of the td as we're going to run it from jQuery's document.ready function:
<td class='dusky'></td>
Next, we make a function to assign each td with the output of duSky():
<script>
// This function takes every table cell with dusky class and inserts output of duSky() into it
$(document).ready(function refresh(){
$('.dusky).each(function(){
this.html = duSky();
})
})
</script>
Finally, we make it refresh every 5 seconds:
<script>
// Make our refresh script run every 5 seconds
setInterval(refresh, 5000);
</script>
Note: I can't test this where I am, code may not be 100% correct, but this is on the right lines. If you change it and it helps, please give me the right code so I can edit the post and give future readers an easier ride.
Is there any way we can hide column of display table,we have media="none" which hides the column .i have tried using
document.getElementById(display_column_name).media="none";
but it is not working, i am stuck while setting attritube of display column in javascript is there any way.As on button select column is to hide/display of display table.
i have checkbox on column header.i have to hide columns of display table.selected column is hiden on button click.
i have also tried using div tag for display column
<div id= "col1" style="display:block">
<display:column paramId="date_disp" paramName="date_disp" property="date_disp" title="Date" sortable="true" headerClass="sortable" decorator="com.commons.ColDateDecorator" style="font-family:Arial, Helvetica, sans-serif;font-size: 12px;height: 25;"/>
</div>
and document.getElementById('col1').style.display="none"; but its not working.
Is it one element that you want to hide or severals ? document.getElementsByName will return you an array of elements so you need to access it like this:
document.getElementsByName(display_column_name)[0].media="none"
If it's just one element and this element has a id consider using this maybe:
getElementById()
Also i assume display_column_name is a variable defines previously right?
Uchenna is right you can use jquery library
Import the script into your page using script tag
add an attribute "id" or "class" to column you want to hide
and using that class or id you can hide that element.
eg. if you have mantioned id attribute and valuse is "abc"
then you can write :
$(document).ready(function()
{
$("#abc").hide();
});
The best way to this is to set the css display style to none.
document.getElementById("id _of_the_component").style.display = 'none';
Or you can use jquery Library
but you have to download jquery library from jquery.com. Import the script into your page with the script tag and do the following
$("#id _of_the_component).hide();
modify your display column like :
<display:column class="abc" paramId="date_disp" paramName="date_disp" property="date_disp" title="Date" sortable="true" headerClass="sortable" decorator="com.commons.ColDateDecorator" style="font-family:Arial, Helvetica, sans-serif;font-size: 12px;height: 25;"/>
on button click you can write :
lets say you are using button
<input type="submit" value="Submit" id="success" />
then you can use it like :
$('#success').click(function(){
$(".abc").hide();
});
Try the following:
HTML:
<html>
<table>
<tr>
<td id="td1">TD1</td>
<td id="td2">TD2</td>
<td id="td3">TD3</td>
</tr>
</table>
</html>
JavaScript:
document.getElementById("td2").style.display = "none";
Demo: http://jsfiddle.net/Vishal_Suthar3/kDb8Z/
I'm using the jQuery tableDnD plugin to make a drag-and-drop list out of a table displaying a list of images for the user to rearrange. The plugin uses an ID on the tag of the formatting table to rearrange the cells.
When I drag and drop specifically clicking on a spot inside the table cell with no images/content, it works fine. However, when I click on the image (or inside a div containing text) withgin the table cell and try to drag+drop, the text/image gets selected and the rearrange script is not triggered. Neither blocking the select function with css or javascript has worked - any idea?
Example tableDnD code: http://tablednd.googlecode.com/svn-history/r12/trunk/index.html
Sample rows from the table in question:
<table id='imagetable'><tr id='1'><td><img src='images/6/PICT0001.JPG' width='100' class='uploadedThumb'><div class='imgInfo' onselectstart='return false;' ondragstart='return false;'>images/6/PICT0001.JPG<br><a href='admin.php?do=deleteImg&id=6&img=images%2F6%2FPICT0001.JPG' style='font-size: 9px;'>[Delete Image]</a></div><input type='text' name='6' value='' size=2 DISABLED></td>
</tr><tr id='2'><td><img src='images/6/PICT0006.JPG' width='100' class='uploadedThumb'><div class='imgInfo' onselectstart='return false;' ondragstart='return false;'>images/6/PICT0006.JPG<br><a href='admin.php?do=deleteImg&id=6&img=images%2F6%2FPICT0006.JPG' style='font-size: 9px;'>[Delete Image]</a></div><input type='text' name='6' value='' size=2 DISABLED></td>
</tr>
Don't use jQuery use dom-drag it's much better and more functional.
Add this code:
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex11/domdrag/dom-drag.js"></script>
<script type="text/javascript">
Drag.init(document.getElementById("exampleid")); //sets the id to look for to make object draggable
</script>
Sorry I misunderstood the question :(
I am thinking someone may have run across this one, but not sure. From a high level, I am trying to roll over a input [type=text] and display a tool tip (with the contained value) using the plugin available at http://bassitance.de.
I have to use titles and classes for validation on the specific elements, so I put a blank div to hold the input [type=text] value for the roll over.
Issue:
It won't hold the value of 2 text boxes at once. Once I put a value in the box on the right, the tooltip on the left goes away. Same thing if I switch it aroun. I can't keep a tooltip on more than one element.
Here is the code (Note: You will have to download the plugins in the source as I am not sure where the live versions are if there are any).
<link rel="stylesheet" href="/scripts/jquery-tooltip/jquery.tooltip.css" />
<script type="text/javascript" src="/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-tooltip/jquery.tooltip.min.js"></script>
<script type="text/javascript">
$(function(){
$("input").change(function(){
var newTitle = $(this).val();
$(this).parent().attr("title",newTitle);
// re-init tool tip
reload();
});
// Init tooltip
reload();
});
reload = function(){
$("div").tooltip();
}
</script>
<body>
<table border="1px solid black">
<tr>
<td title="hello">
<div>
<input type="text" value=""/>
</div>
</td>
<td>
<div>
<input type="text" value=""/>
</div>
</td>
</tr>
</table>
<div id="debug"></div>
</body>
</html>
I couldn't understand your question. Do you want to show two tooltips at once or your problem is that the title attribute you set on each reload function erases both titles?
I used this plugin before if you explain more, or show a demo of your example i would be able to help.
Sinan.
EDIT Working version: (It changes titles of 'td's)
$(function(){
$("input").change(function(){
var newTitle = $(this).val();
$(this).parent().parent('td').attr("title",newTitle);
// re-init tool tip
reload();
});
// Init tooltip
reload();
});
reload = function(){
$("[title]").tooltip();
}