i have grid and print icon..if i click print icon i should print the grid.but grid lines are not showing in the printout.
What should i do?
Here is my code
<div style="float: right" id="hide_div"><img src="<?=$this->baseUrl('/images/icons/small/print.png')?>" title="Print" alt="Print" /></div>
<div class="clear10"></div>
<div class="pnlMainHeader" id="pnlMainHeader" style="display: none; ">
//some xyz code
</div>
<div class="clear10"></div>
<div id="div_print">
//grid code
<?=$this->TemplateRoles?>
</div>
and onclick printPage code in .js file
function printPage(printpage1, printpage2)
{
var hideDiv = document.getElementById('hide_div')
hideDiv.style.display = 'none';
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr1 = document.getElementById(printpage1).innerHTML;
var newstr2 = document.getElementById(printpage2).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr1+newstr2+footstr;
window.print();
document.body.innerHTML = oldstr;
location.reload();
return false;
}
please help me..
What if you were to add another css file to the header that will force the borders to print? Something like this...
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Then inside the file, you can use that class or selector with something like this:
.gridClass /*(or "td" or whatever it is called)*/ { border:1px solid #000;}
Whatever is named in the print.css will only appear when printed because you specify the medium. I hope that helps.
Related
hai iam trying to place hover in an dynamic image have to show a dynamic div, if remove mouse div has to be hidden, if i over to the div after hover on image div needs to remain visible if i move out from the div it has to be hidden i tried something like this, but not working as expected, If i over to image div appears if i place mouseout tag there it hides the div once i remove the mouse couldn't use the options in the div, if i place the mouse out in div once i remove the mouse from image the div not closing, sorry for bad english as solutions for this case?
<img onmouseover="GoView_respond(<?php echo $print->Friend_id;?>);" onmouseout="ExitView_respond_one(<?php echo $print->Friend_id;?>);">
<div class="respond_request" style="display:none;" id="pending_req_<?php echo $print->Friend_id;?>" >
<p class="user_details" onmouseout="ExitView_respond(<?php echo $print->Friend_id;?>);">
</div>
<script>
function GoView_respond(id){
console.log('hovering');
document.getElementById("pending_req_"+id).style.display="block";
}
var cl=0;
function ExitView_respond(id){
console.log('not hovering');
if(cl!=1){
document.getElementById("pending_req_"+id).style.display="none";
}
}
</script>
Well, there are various ways to achieve this.
You could for example trick by setting a little timeout that will allow the mouse to reach the user details html node and vice-versa.
Let me be more explicit, according to your case
<?php
class Friend
{
public $Friend_id;
public $Friend_details;
public $Friend_image;
public function __construct($id, $details, $image){
$this->Friend_id = $id;
$this->Friend_details = $details;
$this->Friend_image = $image;
}
}
$print = new Friend(1, 'The very first user', 'http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
?>
<img class="user_image" id="user_image_<?php echo $print->Friend_id; ?>" src="<?php echo $print->Friend_image; ?>" alt="some image" />
<div class="user_details" id="user_details_<?php echo $print->Friend_id; ?>">
<h5>User details</h5>
<?php echo $print->Friend_details; ?>
</div>
<style>
.user_details {
display: none;
background-color: lightgray;
width: 250px;
padding: 15px;
}
</style>
<script>
var userImages = document.getElementsByClassName('user_image');
for(var i = 0; i < userImages.length; i++){
var
userImage = userImages[i],
userId = userImage.id.replace('user_image_', ''),
thisUserDetails = document.getElementById('user_details_' + userId),
mouseOutTimeout = 100, // Here is the trick
mouseTimer = null; // Needed in order to hide the details after that little timeout
userImage.addEventListener('mouseout', function(){
mouseTimer = setTimeout(function(){
thisUserDetails.style.display = 'none';
}, mouseOutTimeout);
});
userImage.addEventListener('mouseover', function(){
clearTimeout(mouseTimer);
thisUserDetails.style.display = 'block';
});
thisUserDetails.addEventListener('mouseout', function(){
var _this = this;
mouseTimer = setTimeout(function(){
_this.style.display = 'none';
}, mouseOutTimeout);
});
thisUserDetails.addEventListener('mouseover', function(){
clearTimeout(mouseTimer);
});
}
</script>
Note: I've used getElementsByClassName and addEventListener here, that are not compatible with IE8 and earlier. Check this link for getElementsByClassName compatibility and this one for addEventListener.
Hope it help.
My heading for WordPress is using the blog name.
I think this is the code in WordPress that displays the header text:
<a id="logo" href="<?php echo home_url(); ?>" <?php echo $logo_class; ?>>
I can change header text using the below CCS code:
header#top #logo {}
I want to change it so text to randomize on hover.
Similar to this http://jsfiddle.net/neeklamy/3eXfk/
Any ideas how?
Thanks in advance.
How about something like this?
var colors = ['#f9c213', '#f35c4a', '#3da1bf', '#827287'];
var originalcolor = $('#logo').css('color');
$('#logo').on('mouseenter', function(){
var col2 = Math.floor(Math.random() * colors.length);
var newcolor = colors[col2];
console.log(newcolor);
$(this).css('color',newcolor);
});
$('#logo').on('mouseleave', function(){
$(this).css('color', originalcolor);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="logo" href="#" class="">Link</a>
I am trying to add new elements (buttons) to html file using javascript. Here is the working script:
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<script type="text/javascript">
var element = document.createElement("input");
element.type = "button";
element.value = "Click me";
element.id = <?=$row['id'];?>;
var foo = document.getElementById("examples");
foo.appendChild(element);
</script>
<?php
}
?>
</div>
The script adding new elements to html file, but I would like to change some of the properties (for example:button size) too.
I have method SetProperties(id, fontSize) and if I am adding it in code when elements should be created it doesn't work, it even do not creates that new elements. Here is the code which makes me a headache:
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<script type="text/javascript">
var element = document.createElement("input");
element.type = "button";
element.value = "Click me";
element.id = <?=$row['id'];?>;
var foo = document.getElementById("examples");
foo.appendChild(element);
*SetProperties(<?=$row['id'];?>, <?=$row['fontSize'];?>);*
</script>
<?php
}
?>
</div>
And here is the function which changes new elements properties:
<script type="text/javascript">
function SetProperties(id, fontSize)
{
var btn = document.getElementById(id);
btn.style.fontSize = fontSize + "px;";
}
</script>
you may try like this
<style>
#examples [type=button]
{
font-size:25px;
}
</style>
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<script type="text/javascript">
var element = document.createElement("input");
element.type = "button";
element.value = "Click me";
element.id = <?=$row['id'];?>;
var foo = document.getElementById("examples");
foo.appendChild(element);
</script>
<?php
}
?>
</div>
About your code, try using just strings for the id:
element.id = "<?=$row['id'];?>";
/* ... */
SetProperties("<?=$row['id'];?>");
Because getElementById expects a string. In some cases JavaScript could cast the number to string, but it depends on how getElementById is implemented in the browser.
Besides that, the code that your are doing can be implemented in a much better way:
Output the HTML directly
Use CSS for changing the styles
If you need to associate some meta-data to your button so you can refer for example to a database id, use data attributes, instead of messing with the ID.
For example:
<div id="examples">
<?php
while ($row=mysql_fetch_array($result)) {?>
<button class="do-something" data-row-id="<?=$row['id'];?>">Click me</button>
<?php
}
?>
</div>
Then in CSS:
.do-something { /* set CSS properties */ }
Also if you need to add a click handler, and you have a lot of buttons, you can assign the handler to the container of buttons (the example uses jQuery):
$('#examples').on('click', '.do-something', function () { /* handler */ });
This is more efficient than assigning the click handler for each button.
<script type="text/javascript">
function SetProperties(id)
{
document.getElementById(id).style.fontSize = 25 + "px";
}
</script>
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<script type="text/javascript">
var element = document.createElement("input");
element.type = "button";
element.value = "Click me";
element.id = <?=$row['id'];?>;
var foo = document.getElementById("examples");
foo.appendChild(element);
SetProperties(<?=$row['id'];?>, <?=$row['fontSize'];?>);
</script>
<?php
}
?>
</div>
I agree with #meagar -- why emit JavaScript when you can do it all on the server?
Here's how you would add the elements directly on the server-side, instead of emitting JavaScript that then adds the elements on the client-side:
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<input type="button" value="Click me" id="<?=$row['id'];?>" />
<?php } ?>
</div>
and to style it, put this in the <head> or in your CSS file:
<style>
#examples input {
font-size: 25px;
}
</style>
You may try like this to avoid creating `buttons` at `client` side
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<input type="button" value="Click me" id="<?=$row['id'];?>" style="font-size: 25px;" />
<?php } ?>
</div>
I'm confuse in this topic what should I do and How.?
I would like to have popup box which ask for the password before delete the user from the list. If Password(as some value eg. ex12345) is correct then delete the user If no then say Password is incorrect.
I have my PHP page with simple popup. I would like to have popup with the inputbox
Any help will be appreciate.
here is my code. as view.php
<html>
<head>
<meta charset="utf-8">
<title>LogIn Information System</title>
<link rel="stylesheet" media="screen" href="stylesS.css" >
<script>
function confirmDelete(delUrl)
{
if (confirm("Are you sure you want to delete"))
{
document.location = delUrl;
}
}
</script>
</head>
<body>
<div class="header-top">
<a href="//home" class="utopia-logo">
<img src="//images/logo.png" alt="asd" />
</a>
</div><!-- End header -->
<table class = "button_table">
<tr>
<td><button class="submit" type="submit">Home</button></td>
<td><button class="submit" type="submit">Search</button></td>
<td><button class="submit" type="submit">Customer List</button></td>
<?php
if($_SESSION['valid']=='admin'){
echo "<td><button class='submit' type='submit'><a href='add.php'>Add User</a></button></td>";
echo "<td><button class='submit' type='submit'><a href='users.php'>View User</a></button></td>";
}
?>
<td><button class="submit" type="submit">Logout</button></td>
</tr>
</table>
<form class="contact_form" action="search.php" method="post" name="contact_form">
<ul>
<li>
<h2>Search Results</h2>
<span class="required_notification">Following search matches our database</span>
</li>
</li>
<?php
echo "<table border='0' width='100%'>";
echo "<tr class='head'>";
echo "<th>Name</th>";
echo "<th>Last Name</th>";
echo "<th>Phone</th>";
echo "<th>Action</th>";
echo "</tr>";
while($row = mysql_fetch_array($find)){
echo "<tr class='t1'>";
echo "<td>".$row['fname']."</td>";
echo "<td>".$row['lname']."</td>";
echo "<td>".$row['phone']."</td>";
?>
<td>
<a href="edit.php?id=<?php echo $row['id'];?>" class='action'>Edit</a> |
Serve
</td>
<?php
echo "</tr>";
}
echo "</table>";
?>
</li>
</ul>
</form>
</body>
</html>
Delete.php
if (isset($_GET['id']) && is_numeric($_GET['id']))
{
// get id value
$id = $_GET['id'];;
}
$rec = "delete from data where id='$id'";
if(mysql_query($rec)){
echo "<center></h1>Selected Customer serve by DC</h1></center>"."<br />";
echo "<center></h6>Please wait while you are redirected Home in 3 seconds..</h6> </center>"."<br />";
header('Refresh: 3; url=home.php');
}
else{
die("Data failed to delete in the database");
}
?>
Okay here is an example of what I think you are asking for:
I separated the js in the header so you could better understand. first one does the pop up box and second script does the ajax call. Remember this is a very basic example
Test.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/3-$(id).height()/3);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
$(window).resize(function () {
var box = $('#boxes .window');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
box.css('top', winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);
});
});
</script>
<script type="text/javascript">
function ConfirmDelete()
{
var confirm = document.getElementById('confirm').value;
var dataString = 'password='+ confirm;
if(confirm.length>0)
{
$.ajax({
type: "GET",
url: "delete.php",
data: dataString,
success: function(server_response)
{
document.getElementById("results").style.display = "block";
$('#results').html(server_response).show();
$('#mask').hide();
$('.window').hide();
}
});
}
return false;
}
</script>
<style type="text/css">
#mask{position:absolute;left:0;top:0;z-index:9000;background-color:#222;display:none}
.window{position:fixed;left:0;top:0;width:450px;height:200px;display:none;z-index:9999;padding:20px}
#dialog1{padding:10px 10px 8px 25px;border:2px solid #a1a1a1;width:450px;height:200px; background-image:url('imgs/bg.jpg');
</style>
</head>
<body>
Delete this Entry
<!-- Start of MODAL BOX -->
<div id="dialog1" class="window" align="center">
<font color="#FFFFFF">If you are sure you wish to delete this please enter your admin password</font><br>
<font color="#FFFFFF"><b>test password ( Admin )</b></font>
<input type="password" id="confirm"/><br><br>
<input type="submit" name="confirm_delete" onclick="ConfirmDelete()" value="Confirm Delete">
</div><!-- End of MODAL BOX -->
<div id="mask"></div><!-- Mask to cover the whole screen -->
<div id="results" class="results" style="display:none;"> </div>
</body>
</html>
the call page this is where you will have your php
delete.php
<?PHP
if($_GET['password'] === "Admin")
{
//sucess do your delete here
echo " this was the correct password ";
}
else
{
//failure
echo " Password incorrect!! ";
}
?>
do JS check on client side and use CRSF on server side - http://en.wikipedia.org/wiki/Cross-site_request_forgery
Here is a good example: CSRF (Cross-site request forgery) attack example and prevention in PHP
I am experiencing this problem for few hours now and really not sure how to solve this. However its work fine in IE but it is not working in mozilla.
Here is my code:
<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/skin.css">
<!-- Utility Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script src="http://yui.yahooapis.com/2.7.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.7.0/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script src="http://yui.yahooapis.com/2.7.0/build/editor/editor-min.js"></script>
<script>
var myEditor = new YAHOO.widget.Editor('msgpost', {
height: '100px',
width: '522px',
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
myEditor.render();
//Inside an event handler after the Editor is rendered
YAHOO.util.Event.on('save', 'click', function() {
//Put the HTML back into the text area
myEditor.saveHTML();
//The var html will now have the contents of the textarea
var html = myEditor.get('msgpost').value;
});
YAHOO.util.Event.on('edit', 'click', function() {
//Put the HTML back into the text area
myEditor.saveHTML();
//The var html will now have the contents of the textarea
var html = myEditor.get('msgpost').value;
});
</script>
<form id="form2" name="form2" method="post" action="processgreeting.php">
<div class="span-22 gtype" >
<div class="span-5"><label>Message:</label></div>
<div class="span-17 last"><textarea name="msgpost" id="msgpost" cols="50" rows="40"> </textarea> <br>
</div>
<input type="submit" name="save" value="Post Greeting" id="postgreeting"/>
</form>
processgreeting.php
if(isset($_POST['save']))
{
$body = trim($_POST['msgpost']);
$valid = 1;
$publish_date = strtotime($publish);
if ($publish >= $today)
{
$valid = 0;
$insert_greeting = "INSERT INTO greeting (type,decs,name,message,date,user,publish) VALUES ('$type','$desc','$name','$body','$today',$user,'$publish')";
$register_greeting = mysql_query($insert_greeting)or die(mysql_error());
$lastnum = mysql_insert_id();
$_SESSION["greetingno"] = $lastnum;
if($valid == 0)
{
echo '<strong>Greeting Type: </strong>'.$type.'<br><strong>Description: </strong>'.$desc.'<br><strong>Name: </strong>'.$name.'<br><strong>Message: </strong>'.$body.'<strong><br>Publish Date: </strong>'.$publish;
}
//echo $valid;
}
else{ //echo "<span style='color:#FF0000'>Publish date is invalid</span>" ;
echo $valid;
} //}
}
Please can anyone help me what iam doing wrong..
Thanks in advance.
i've just tried on my mac with firefox and everything seems to work. What's exactly your problem ?