My image roll over works... But only one way.
function heartOver(id)
{
if(document.getElementById('heart' + id).src == 'images/heart.png');
{
parent.document.getElementById('heart' + id).src = 'images/unheart.png';
}
if(document.getElementById('heart' + id).src == 'images/unheart.png');
{
parent.document.getElementById('heart' + id).src = 'images/heart.png';
}
}
<img src="images/heart.png" id="heart'.$row['id'].'" alt="Love! width="16" height="16" border="0" onmouseover="heartOver'."('$row[id]')".'; return true;" onmouseout="heartOver'."('$row[id]')".'; return true;">
If i comment out either of the IF statements the other will work but they wont work together...
Note: Tried this with a else if no luck.
Figured it out... Duh: i have if ( ) ; No ; after if...
Put an else between them - otherwise when the first if evaluates as true, it will cause the second if to be evaluated as true also!
Here's a simplified example which also checks the assumption that the img element even exists:
var img=document.getElementById('heart' + id);
if (img)
{
if(img.src == 'images/heart.png')
{
img.src = 'images/unheart.png';
}
else if(img.src == 'images/unheart.png')
{
img.src = 'images/heart.png';
}
}
else
{
alert("Ooooh! No heart"+id+" element found!");
}
Is this correct?
<img src="images/heart.png" id="heart'.$row['id'].'" alt="Love! width="16" height="16" border="0" onmouseover="heartOver'."('$row[id]')".'; return true;" onmouseout="heartOver'."('$row[id]')".'; return true;">
Try with this:
<img src="images/heart.png" id="heart<?php echo $row['id']; ?>" alt="Love!" width="16" height="16" border="0" onmouseover="heartOver(<?php echo $row['id']; ?>)" onmouseout="heartOver(<?php echo $row['id']; ?>)">
Related
Hello I have a image slider with some pictures. With the help of ajax I am changing the image url , the image is working fine. while in the case of thumbail I can see the changes reflected in console but it is not reflected on the webpage until i resize the page.
console.log(url);
$('.img1').attr("src",url+"/RUST_1.jpg");
$('.img2').attr("src",url+"/RUST_2.jpg");
$('.img1thumb').attr("data-thumb",url+"/RUST_1.jpg");
$('.img2thumb').attr("data-thumb",url+"/RUST_2.jpg");
<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
<li class="img1thumb" data-thumb="../images/<?php echo $item[0]->DESIGN; ?>/<?php echo $item[0]->COLOR_CODE;?>/RUST_1.jpg" >
<img class="img1" class="card-img-top" class="img" src="../images/<?php echo $item[0]->DESIGN; ?>/<?php echo $item[0]->COLOR_CODE; ?>/RUST_1.jpg" alt="Card image" style="width:100%" />
</li>
<li class="img2thumb" data-thumb="../images/<?php echo $item[0]->DESIGN; ?>/<?php echo $item[0]->COLOR_CODE; ?>/RUST_2.jpg" >
<img class="img2" class="card-img-top" class="img" src="../images/<?php echo $item[0]->DESIGN; ?>/<?php echo $item[0]->COLOR_CODE; ?>/RUST_2.jpg" alt="Card image" style="width:100%" />
</li>
</ul>
I found this in lightslider.js
var thumb = $children.eq(i * settings.slideMove).attr('data-thumb');
if (settings.gallery === true) {
pagers += '<li style="width:100%;' + property + ':' + thumbWidth + 'px;' + gutter + ':' + settings.thumbMargin + 'px"><img src="' + thumb + '" /></li>';
} else {
pagers += '<li>' + (i + 1) + '</li>';
}
if (settings.mode === 'slide') {
if ((v) >= w - elSize - settings.slideMargin) {
i = i + 1;
var minPgr = 2;
if (settings.autoWidth) {
pagers += '<li>' + (i + 1) + '</li>';
minPgr = 1;
}
if (i < minPgr) {
pagers = null;
$slide.parent().addClass('noPager');
} else {
$slide.parent().removeClass('noPager');
}
break;
}
}
}
Sorry to waste your time, but lightslider provides a public function to refresh the slider
Step 1: get an object of the light slider
slider = $(document).find('#image-gallery').lightSlider({});
Step 2: call refresh function after you change the images url
slider.refresh();
Source: https://github.com/sachinchoolur/lightslider/blob/aa6c01e1e0fbf180eed67447471dfc24d29a3ae1/README.md
I'm trying to remove a row from a table with php. I have the following piece of code:
<?php
if($_GET["act"] == 'eliminarart' && $_GET["id"] != '')
{
var_dump($_GET);
if($mysql->query("DELETE FROM landing_articulos WHERE id_articulo = ". intval($_GET["id"])." LIMIT 1")){
redirige('nuevapagina.php');
} else {
$e=$mysqli->error;
echo $e;
}
}
?>
<head>
<script language="javascript">
function eliminar_art(id){
var mensaje = 'Deseas eliminar este articulo?';
eliminar = confirm(mensaje);
if (eliminar)
document.location='nuevapagina.php?act=eliminarart&id='+id;
}
</script>
</head>
I call all this code here:
while($f1 = mysql_fetch_array($c1)){
?>
<div style="float:left; width:32%; padding-left:0px; color:#ef5000; font-weight:bold; margin:5px;"><p><strong><?=$f1["nombre"];?></strong> <img src="imagenes/lapiz.png" width="15" height="15" border="0"/> </a> <img src="imagenes/delete.png" width="15" height="15" border="0"/> <? if($f1["valido"]=='0')echo ' - SIN VALIDAR';?></p></div><?
}
The var_dump returns data, although the id I get is a string instead of an int as it's defined in the database. So what I am doing wrong? All this code is in a page called nuevapagina.php.
no need to convert into integer just simply do it as:
$mysql->query("DELETE FROM landing_articulos WHERE id_articulo = ".$_GET["id"]." LIMIT 1"
I have an iframe on my webpage:
<iframe name="crm_frame" id="crm_frame" src="<?php echo $iframe_src; ?>" width="100%" frameborder="0"></iframe>
and i have tried to add a session variable for the requested_uri
session_start();
if($_SERVER['REQUEST_URI'] == 'index.php')
{
$_SESSION["iframe_page"] = 'dashboard.php';
}
else
{
$_SESSION["iframe_page"] = $_SERVER['REQUEST_URI'];
}
and then set the $iframe_src variable for to echo in the SRC of the iframe code
if($_SESSION["iframe_page"] == '')
{
$iframe_src = 'dashboard.php';
}
else
{
$iframe_src = $_SESSION["iframe_page"];
}
but its not saving the sesison variable.
any ideas?
document.friendform1.friends[i].checked is not working when there is only one element in checkbox array. If there are more than one element in checkbox array than it is working fine
my html and php code is
$x=0;
foreach($result as $row)
{
if($x==0)
{?>
<div class="invite-friends-con">
<?php
}else{?>
<div class="invite-friends-con" style="margin-left:70px;">
<?php
}?>
<div class="invite-friends-con-img">
<img src="<?php echo base_url();?>Profile_images/<?php echo $row->vchPicture?>" width="48" height="39" align="absmiddle" />
</div>
<span><?php echo $row->vchFirstName?></span><input type="checkbox" name="friends[]" style="margin-top:10px" value="<?php if($row->intFriendID==$this->session->userdata('user_id')){ echo $row->intMemberID;}else{ echo $row->intFriendID;}?>" id="friends" />
<input type="hidden" name="frnd[]" id="frnd" value="<?php echo $row->vchFirstName?>" />
<?php if($x==1){$x=0;}else{$x++;}?>
<?php
} ?>
and javascript code is:
function addalfriend()
{
var str='';
var str1='';
var len=document.friendform1.friends.length;
for(i=0;i<len;i++)
{
if(document.friendform1.friends[i].checked==true)
{
if(str=='')
{
str=document.friendform1.friends[i].value;
str1=document.friendform1.frnd[i].value;
}
else
{
str=str+","+document.friendform1.friends[i].value;
str1=str1+","+document.friendform1.frnd[i].value;
}
}
}
document.getElementById('invite_1').value=str;
if(str!='' && str1!=''){
document.getElementById('invited').style.display="block";
}
else{
document.getElementById('invited').style.display="none";
}
document.getElementById('invited').value = str1;
document.getElementById("low-high-div").style.display="none";
document.getElementById("events-input-bg2").value="";
document.getElementById("events-input-bg3").value="";
closemessage1();
return false;
}
So please someone let me know my mistake.
Thanks
when there is one item return then array is not retuned element object is returned so you need to access it differently then
as
var len=document.friendform1.friends.length;
if(len>1)
for(i=0;i<len;i++)
{
if(document.friendform1.friends[i].checked==true)
{
if(str=='')
{
str=document.friendform1.friends[i].value;
str1=document.friendform1.frnd[i].value;
}
.
.
.
}
else
{
if(document.friendform1.friends.checked==true)
{
if(str=='')
{
str=document.friendform1.friends.value;
str1=document.friendform1.frnd.value;
}
}
.
.
.
}
You can try it simply like:
var len=document.friendform1['friends[]'].length || 1;
for(i=0;i<len;i++)
{
...
...
...
}
...
...
...
Read Why I can not get checkbox length while using it differently?
I'm trying to make Jquery delete function, here is the code, that I wrote -
$("a.delete").click(function(){
var target = $(this).attr("id");
var c = confirm('Do you really want to delete this category?');
if(c==true) {
$(target+"ul").delay(3000).fadeOut(200);
}
else {
return false;
}
});
Okay now to problem, when I press, button a with class delete, it correctly, shows up the dialog (and the id is correct), but after I press yes, it will delete it with php, without jquery fadeOut effect.
My php code -
public function deleteCategory() {
if(isset($_GET['action']) && $_GET['action'] == 'delete') {
$id = (int)$_GET['id'];
$sql = "DELETE FROM `categories` WHERE `id` = '".$id."'";
mysql_query($sql);
}
}
Not sure where is the problem but I think it's inside $(target+"ul"), since I'm not sure, if it will add the target value and ul together.
In additional, how can I prevent the delete, if I press no? Currently, if I press no, it will still delete the category.
If you need any other information - ask.
Full code -
public function showCategories() {
if(isset($_SESSION['logged_in']) && isset($_SESSION['user_level']) && $_SESSION['user_level'] == 'admin') {
$sql = "SELECT * FROM `categories`";
$q = mysql_query($sql);
if(mysql_num_rows($q) > 0) {
?>
<div class="recentorders" style="display: none;" id="categoryBox">
<h5 class="colr">Categories</h5>
<div class="account_table" style="width: 688px;">
<ul class="headtable" style="width: 680px;">
<li class="order">ID</li>
<li class="action" style="width: 430px;">Category Name</li>
<li class="action nobordr">Options</li>
</ul>
<?php
while($row = mysql_fetch_array($q)) {
?>
<ul class="contable" style="width: 680px;" id="cat<?php echo $row['id']; ?>ul">
<li class="order"><?php echo $row['id']; ?></li>
<li class="action" style="width: 430px;"><?php echo $row['name']; ?></li>
<li class="action nobordr">Edit<a class="delete" id="cat<?php echo $row['id']; ?>" href="?action=delete&id=<?php echo $row['id']; ?>#">Delete</a></li>
</ul>
<?php
}
?>
</div>
</div>
<?php
}
else {
// No categories created, please create one first.
}
}
else {
header('location: account.php');
}
}
public function deleteCategory() {
if(isset($_GET['action']) && $_GET['action'] == 'delete') {
$id = (int)$_GET['id'];
$sql = "DELETE FROM `categories` WHERE `id` = '".$id."'";
mysql_query($sql);
}
}
If you're searching by ID you need to prefix your selector with a "#":
100% working sample on jsFiddle:
http://jsfiddle.net/E7QfY/
Change
$(target+"ul").delay(3000).fadeOut(200);
to
$('#' + target+"ul").delay(3000).fadeOut(200);
OR
$(this).closest('ul').delay(3000).fadeOut(200);
I would also modify the code to this:
$("a.delete").click(function(event){
if(confirm('Do you really want to delete this category?') == true){
$(this).closest('ul').delay(3000).fadeOut(200);
window.location.href = $(this).attr('href'); //OR use AJAX and do an event.preventDefault();
}
else
event.preventDefault();
});
It's because you are using an anchor tag that is causing a postback to the server which makes your page refresh before you see the animation. Make sure your anchor tag has an href defined as "#" to stop the postback from happening.
You should use something else than A tag e.g. span or div. And then after clicking this element make your fadeout and after it redirect to the PHP script that deletes your object:
$("SPAN,DIV.delete").click(function(){
var target = $(this).attr("id");
var c = confirm('Do you really want to delete this category?');
if(c==true) {
$(target+"ul").delay(3000).fadeOut(200);
window.location.href = URL TO PHP FILE
}
else {
return false;
}
});