Forum Moderators: open

Message Too Old, No Replies

Need help with jquery

New to jquery

         

TheKG

7:56 pm on May 30, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



I need a lightbox effect on my website, but wanted lighter coding. After researching on the web, I found several articles and sites explaining jquery. It seems to fit my needs. My confusion lies in whether I should download the library or use a link. What are the risks of linking to a jquery library? What are the advantages/disadvantages of downloading vs linking?

Fotiman

12:50 am on May 31, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The only risk is if the CDN you're linking to goes down (highly unlikely). However, if you wanted to you could default to linking to the CDN version, and then if that is down, default to a local copy. See the HTML5 Boilerplate [html5boilerplate.com] for a good example of how to do that.

The advantage to linking a CDN version is that the end user may have visited a site already that uses the same CDN version, in which case they will have it in their browser cache already and the browser will not need to make another HTTP request, thereby improving the performance of your site.

daveVk

1:28 am on May 31, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If you link to jquery at a popular site, there is a chance the user will already have it cached, saving time on users first visit. The risk is the site being down, hacked, slow, blocked etc. Conservative approach is to download it.

There are probably lighter options than jquery if this is the only jquery feature you need. Compare the library size to the total size of other page content, to see if it an issue.

TheKG

2:24 am on May 31, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thank you for the information; I now see the advantages and disadvantages. daveVk, you mentioned lighter options than jquery; can you be more specific?

daveVk

7:20 am on May 31, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I do not have anything particular in mind, just if size is really an issue a 100K library may be overkill. Most likely the library size is not significant compared to other content and will provide lots of other facilities.

JAB Creations

9:19 am on May 31, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It would take me two minutes to code a lightbox if all you want is to change the opacity of the body element and center an image on top of everything else. Why automatically make your site completely unfriendly to people on dialup and in addition to that depend on a third party to host a third party framework? Not to mention if you're going to depend on third party software 90% of projects automatically dump even the simplest of tasks on to jQuery so you'll quickly end up with multiple copies, tons of wasted bandwidth and cross-browser issues because jQuery is not cross-browser compatible. On top of all that it depends on unreliable non-standard methods such as innerHTML. I've seen zero valid justifications to use jQuery. If you know how to change a className and set the opacity with CSS you can code this from scratch in two minutes. jQuery is not the answer.

- John

TheKG

5:49 pm on May 31, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



daveVk - You are absolutely right...100k library is overkill. John, appreciate your comments; sums up my apprehension quite well. After reading the replies here, I was going to make an attempt at using CSS and jscript to accomplish the overlay. I am comfortable with CSS classes, but will need to read up on the opacity; understand only a little of jscript, but I have examples to start with. Guaranteed if I get stuck I'll be back. Thanks to all.

TheKG

8:54 pm on May 31, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



OK...said I'd be back if I got stuck...here I am. Found this example on the internet. It uses CSS with a little javascript. The entire example is below.

Although it works great as is, I need to place it in a nested table located in a div. When I do that, it doesn't work at all. I'm not nearly skilled enough to know how to put the script in a separate file and reference it so it works on my page.

Any assistance is greatly appreciated.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

TheKG

8:59 pm on May 31, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



Additional information...forgot to mention in my post that I am using php as well. The place I am putting this code is within the php tags. Do I need to use this code outside the php?

JAB Creations

11:34 am on Jun 1, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Opacity in IE8 and earlier in CSS as classes...
.fade {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);}
.opaque {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}


Fading the main background layer's opacity...
document.getElementById('main_id_here').className = 'fade';


I cascade the opacity classes for my site by serving IE specific style sheets after the main style sheet so it will override the standards compliant version of opacity. Also note that you don't need a 1002 value for z-index, the base z-index value is 0 (it can not be set to negative and be valid) so the above image layer should be set to 1. Use browser developer tools to determine the inherent z-index value just to make sure.

- John

Fotiman

1:18 pm on Jun 1, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




the base z-index value is 0 (it can not be set to negative and be valid)

Actually, that's incorrect. Boxes may have negative stack levels.
[w3.org...]

TheKG

6:05 pm on Jun 3, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



I have spent the rest of this week reading CSS and javascript. I have copied CSS and scripts in an effort to better understand how to use them for my purpose. After days, I am in the same place...they function as described and intended when used in html, but NOT in a table cell. Since I need the link to appear in a table cell, am I to conclude that it simply is not possible and just move on? This has put me at a complete standstill in regards to the redesign of my website. If I know it is not possible, I have found one solution that, although not ideal, will just have to work.

I appreciate the responses I have received. If anyone has suggested solutions, please keep in mind that I have very little working knowledge of scripts.

Fotiman

7:48 pm on Jun 3, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Can you provide a base case example? Your original example doesn't include tables.

TheKG

8:38 pm on Jun 3, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thank you for the quick reply. Here is the code for one of the pages. I want to hide the prices of my merchandise with a statement "See Prices in Cart" followed by the word "why". When a user clicks "why" I want a text box to appear over the page with the explanation and a "close" link in the text box.

Below, I have inserted:
*****HERE IS WHERE I NEED THE LINK TO APPEAR****
that's the cell where I need the link to appear on the page for clarity purposes.

Any assistance is greatly appreciated.



<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta name="title" content="Cherokee Workwear Navy Blue Scrubs">
<meta name="description" content="Cherokee Workwear Navy Blue Scrubs. Choose from unisex, men's or ladies' styles in tops, pants and jackets. Sizes from XXS to 5XL; pants in regular, petite and tall lengths.">
<meta name="keywords" content="Navy Blue scrubs, workwear, medical scrubs, scrubs, Cherokee, Cherokee scrubs, uniforms, medical uniforms, Cherokee uniforms">
<meta name="generator" content="Namo WebEditor">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link type="text/css" rel="stylesheet" href="../css/style_1.css">

<title>Cherokee Workwear Navy Blue Scrubs</title>

</head>

<body>
<div id="header">
<?php include ('header.htm'); ?>
</div>
<div id="menu_l">
<?php include ('menu.htm'); ?>
</div>
<div id="content">
<?php
include('admin/misc.inc');$cxn = mysqli_connect($host,$user,$passwd,$dbname) or die ("couldn't connect to server" . mysqli_error());
$input = "input type=\"text\" size=\"2\" name=";

$i = 0;
$cols = 3;

echo "<center><table id='topord' cellspacing='0'>";

$result= mysqli_query($cxn,"SELECT * FROM style_img WHERE ((vendor_code ='CHEWW')
AND (color_code='NAVW')) ORDER BY style_no DESC") or die ("problem with query" . mysqli_error());
echo "<tr>";
echo "<td colspan='3' align='left' class='topstyle'>Cherokee Workwear Navy Blue Scrubs in unisex, men's or ladies' styles in tops, pants and jackets. Sizes from XXS to 5XL; pants in regular, petite and tall lengths. Make all selections, click &quot;Add All Items to Cart&quot; button once and all selected items on this page will be placed in your cart.</font></td>";
echo "</tr>";
echo "<tr>";
echo "<td colspan='3' align='center' valign='top'><a href='Workwear.php'><img src='../images/Logos/CHEWWlogo.jpg' border='0' alt='Cherokee Workwear Logo' title='Cherokee Workwear Logo'></a></td>";
echo "</tr>";


echo "<tr>";
echo "<td colspan='3' class='fabric'><form action=\"https://www.trust1.com/Welcome.cgi\" method=\"POST\"><input type=\"hidden\" name=\"ID\" value=\"aevalynn\">**Note: Fabric color may vary due to differences in browser and monitor displays**</td>";
echo "</tr>";

echo "<tr>";
echo "<td>*****HERE IS WHERE I NEED THE LINK TO APPEAR****";
echo "</td>";
echo "</tr>";

echo "<tr>";
while($srow = mysqli_fetch_assoc($result))
{
echo "<td><table id='botts' cellspacing='0' height='330px' cellpadding='0'>";
echo "<tr>";
echo "<td colspan='2' width='250px' bgcolor='#004182'>";
echo "<p><font color='#FFFFFF'>{$srow['style_desc']}</font></p>";
echo "</td>";

echo "<tr>";
echo "<td rowspan='11' align='center' width='90px'>";
echo "<p>Style #{$srow['style_no']}</p><p>{$srow['color_name']}</p><p>{$srow['desc']}</p>";
echo "<p><a target='_blank' href='../images/{$srow['photo_lg']}'><img src='../images/{$srow['photo_sm']}' border='0' alt='Cherokee Workwear {$srow['color_name']} Style #{$srow['style_no']}' title='Cherokee Workwear {$srow['color_name']} Style #{$srow['style_no']}'></a></p>";
echo "<p>Click image to enlarge</p>";
echo "<INPUT TYPE='image' SRC='images/buy.jpg'
BORDER='0' ALT='Add All Items to My Cart' title='Add All Items to My Cart'>";
echo "</td>";


$result2= mysqli_query($cxn,"SELECT * FROM products WHERE ((color_code='NAVW') AND (id={$srow['id']})) ORDER BY size_rank") or die ("problem with second query" . mysqli_error());

while($row = mysqli_fetch_array($result2))
{
echo "<td class='size' width='160px'>";
echo "<$input\"{$row['price']}_{$row['sku']} {$row['vendor_name']} {$row['color_name']} {$row['desc']} #{$row['style_no']}-{$row['color_code']}-{$row['size']}(nontaxable)_{$row['shipping']}\"> {$row['size']}@ \${$row['price']} each";
echo "</td>";
echo "</tr>";
} // endwhile result2
echo "</table></td>";
$i++;
if(!($i%$cols)) {
echo " </tr>\n";

if($i%$cols){
while(($i++)%$cols)
echo " <td>&nbsp;</td>\n";
echo " </tr>\n";
} // endwhile result
}
} // EndIf need to fill a row


echo "<tr>";
echo "<td colspan='3'></td>";
echo "</tr>";
echo "</table>";
echo "</form>";
?>
</div>

<div id="footer">
<?php include ('footer.htm'); ?>
</div>
</body>

</html>

Fotiman

12:27 am on Jun 4, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Can you reduce the clutter by viewing the page in your browser and then doing view source? That will give the actual html output after the php has been processed. A bit easier to debug that way.

TheKG

2:39 am on Jun 4, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



Fotiman, sent you a pm with the link to the page; seemed an easier solution.

Fotiman

1:01 pm on Jun 6, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Looking at your earlier post [webmasterworld.com], I suspect the problem is that you're trying to rely on the CSS for width/height = 100%. That only works if the parent node height can be calculated, which is why I think it's not working for you in a table.

TheKG

8:17 pm on Jun 6, 2011 (gmt 0)

10+ Year Member Top Contributors Of The Month



After a 2 day rest from this and reading your post, I regained a little clarity. Since the table is within the content div I already have in my page css, I changed the css for the overlay to correspond with the content div and it works. For IE, had to put "background-position: left;" in the overlay; Firefox displayed correctly with or without. Thank you for finding this rather simple solution to my frustrating problem.

Here is the changed css:

.black_overlay{
display: none;
position: absolute;
width: 750px;
height:100%;
background-position:left;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 215px;
left: 200px;
width: 340px;
height: 150px;
padding: 5px;
border: 10px solid #993366;
background-color: white;
z-index:1002;
overflow: auto;

This is the absolute best forum I have visited. Many do not reply, and when they do, the response is almost condescending. I have learned a great deal from the comments, suggestions and explanations provided not only to my questions, but those posted in other threads.