[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

jQuery

17K

Solutions

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Share tech news, updates, or what's on your mind.

Sign up to Post

1. I want to add the compare checkbox under the item. When user checks the checkbox, the image will be added to the bottom  of the comparing area. The following code does not work. Please advise!
2. How to add the Compare link to the comparing area, which will be linked to the page with the four compared products. Click each product and then linked to the product page.  

Thank you!
<%@ Page Language="VB" %>

<script language="vb" runat="server">

Sub Page_Load(sender As Object, e As EventArgs)
Dim strSQL
		
 	-------------
					
</script>

<style>
.empty-border {
  padding-bottom: 100%;
  border: 1px dashed #9c9c9c;
}

#compare-box-products {
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, .2);
  background-color: #fff;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 558px;
  padding: 10px;
  pointer-events: all;
  display: none;
}

.empty-border {
  width: 110px;
  height: 110px;
}

.compare-image-container img {
  width: 108px !important;
  height: 108px !important;
  border: 1px dashed #9c9c9c;
}


</style>


 
 
<body >










<div class ="grid-top-spa"><asp:Label runat="server" ID="lblMessage" /> </div>

 <asp:DataList ID="compare"
									           CellPadding="0"
                                               CellSpacing="0"
                                               RepeatDirection="Horizontal"
									           borderstyle= "none"
									           GridLines="None"
									           RepeatLayout="Table"
									           RepeatColumns="3"				

Open in new window

1
Rowby Goren Makes an Impact on Screen and Online
LVL 12
Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

I have a navigation bar on the left side of the product category per the attached image. There is a  vertical scroll bar. Inside  the bar, there are titles with arrows, when user clicks the arrows, and it will expand and see the contents. When user checks the checkbox, it will expand again. When users selects the checkbox, it will go to the linked page. On the linked page, the checkbox the users just selected should still be collapsed instead of hiding, with the check mark checked   Any simple example?
Navigation-bar.jpg
0
The folder name is labeled by ID. If the idProduct is 3, the folder is 3. In folder 3  there are three images, and in folder 4, there are 2 images, but in folder 6 there are 7 images.  

In the coding as below, the images for idproduct 3 and idproduct 4  will be displayed as X (no images) starting from image 4 and image 3 separately. How to modify the coding?  Thank you!

<ul id="carousel" class="jcarousel jcarousel-skin-tango">
<li><a href="#" rel="p1"><img src="images/small/<%=idProduct%>/1.jpg" /></a></li>
<li><a href="#" rel="p2"><img src="images/small/<%=idProduct%>/2.jpg" ></a></li>
<li><a href="#" rel="p3"><img src="images/small/<%=idProduct%>/3.jpg" ></a></li>
<li><a href="#" rel="p3"><img src="images/small/<%=idProduct%>/4.jpg" ></a></li>
<li><a href="#" rel="p3"><img src="images/small/<%=idProduct%>/5.jpg" ></a></li>
<li><a href="#" rel="p3"><img src="images/small/<%=idProduct%>/6.jpg" ></a></li>
<li><a href="#" rel="p3"><img src="images/small/<%=idProduct%>/7.jpg" ></a></li>

  </ul>

Open in new window

0
Thanks for the expert Zakaria's prompt advice!
I followed his example, but still have some issues.
 It works perfectly if the image is listed individually. When the checkbox is checked, the image is added to the comparing area
 <div class="col-sm-4 col-md-3">
          <div class="thumbnail">
           
 <div class="thumbnail-img">
              <img src="images/1.jpg" width="150" height="150" class="img-p1">
            </div>
           
              <h3>Product 1</h3>
              <p>10 $</p>
              <p><input type="checkbox" class="p1"> Compare Product
              </p>
            </div>
          </div>

Open in new window

But if add to the datalist area, it does not work. When checking the checkbox, it does not do anything.  
<asp:DataList ID="compare"
									           CellPadding="0"
                                               CellSpacing="0"
                                               RepeatDirection="Horizontal"
									           borderstyle= "none"
									           GridLines="None"
									           RepeatLayout="Table"
									           RepeatColumns="3"									          
									           ShowBorder="false"
									           runat="server" HeaderText="" HeaderStyle-BackColor="#fff" HeaderStyle-ForeColor="#FFFFFF" HeaderStyle-Font-Bold="true">

                                   <ItemTemplate>
								   
	
 

<table>
      <tr>
		<td> <a href="products.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>">
   
        <div class="thumbnail"> <div class="thumbnail-img"><img src="images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg" class="img-p1"> </div></a>

</td>
	</tr>

 <tr><td><input type="checkbox" class="p1"> Compare Product</td></tr>

Open in new window


Lastly how to add the Compare link to the comparing area, which will be linked to the page with the four compared products. Click each product and then linked to the product page.  Per the attached image.
compare.jpg
0
i have mvc / c# /razor app that have been using for many years.
Now I want to have a page that can keep scroll position. e,g, i have razor webpage and inside have 5 to 8 buttons, and each each usually do some post back with jquery call.

I just want something super simple so I can implement the feature. Thanks

See below has some sample but I do not know how to implement them.

https://stackoverflow.com/questions/11653152/mvc-razor-outputting-text-in-position-to-the-screen/11653295
0
Add the image like (img/big/red.jpg) etc. to mySQL, and retrieve the images.
0
Hi experts,  I have a page, where I want to display the images of the products. I do not want to restore the images in the database, but in the folder.
Currently I have a problem. Since some of the products have one or two images, and some of the products have more than 2. Per the code below,  if the products have less than 5 images, the image folder which do not have 5 image will be displayed as X (no image).  How to fix it? Thank you!


<ul id="carousel" class="jcarousel jcarousel-skin-tango">
				<li><a href="#" rel="p1"><img src="images/<%=idProduct%>/1.jpg"></a></li>
				<li><a href="#" rel="p2"><img src="images/<%=idProduct%>/2.jpg"></a></li>
				<li><a href="#" rel="p3"><img src="images/<%=idProduct%>/3.jpg"></a></li>
                          <li><a href="#" rel="p3"><img src="images/<%=idProduct%>/4.jpg"></a></li>
  <li><a href="#" rel="p3"><img src="images/<%=idProduct%>/5.jpg"></a></li>
				

				
			  </ul>

Open in new window

1
I have come across this page per the following link.  A button "Add to List" is at the right side of the image. When the user clicks Add to the list button, it will be added to the My List.

The button turns to Remove from the list once Add to List has been clicked.  How to accomplish it? Thank you!

https://www.pcna.com/leeds/en-us/leeds-mobiletech-power/product/7121-50_reg-
0
Hi experts, I  have scroll  thumb images,  and when user scrolls and selects the thumb image,  it will be displayed in a big image and  it works fine. Now I want to add a button at the bottom of the displayed image. When the user clicks the button, it will go to the next page (third party site) displaying the same image as the user scrolls.
Below is the code. How to accomplish it?

Thank you!
        <div class="row"> 
                                            
                     <img src="img/img2.jpg" width="100" height="100" alt="" mylink="img/img2.jpg">
                        <img src="img/img3.jpg" width="100" height="100" alt="" mylink="img/img3.jpg">
                        <img src="img/img4.jpg" width="100" height="100" alt="" mylink="img/img4.jpg">
                        <img src="img/img5.jpg" width="100" height="100" alt="" mylink="img/img5.jpg">
                        <img src="img/img6.jpg" width="100" height="100" alt="" mylink="img/img6.jpg">
                         
                        <img src="img/img6.jpg" id="selected" width="100" height="100" alt="">
            </div>
        <input id="btn" type="button" value="select" />
   

Open in new window

1
I want php code to check every row in excel sheet, and if any row already exist in phpmyadmin database then ignore that row and insert remaining new rows into database phpmyadmin by "Upload Document" input field.
0
CompTIA Network+
LVL 12
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

I had this function which opens a window in javascript
function windowopen(theURL,winSize) {
				if (winSize == 'page') 					{ myWidth=1000 ; myHeight=700 ; features = 'scrollbars=1, resizable=1, menubar=1' ; }
				else if (winSize == 'list') 			{ myWidth=700 ; myHeight=555 ; features = 'scrollbars=1, resizable=1, menubar=1' ; }
				else if (winSize == 'small') 			{ myWidth=400 ; myHeight=300 ; features = 'scrollbars=1, resizable=1, menubar=1' ; }
				else { myWidth=400 ; myHeight=500 ; features = 'scrollbars=0, resizable=0' ; }

				if(window.screen)
				{
					var myLeft = (screen.width-myWidth)/2;
					var myTop =  (screen.height-myHeight)/2;
					
					features+=(features!='')?',':''; 
					features+=',left='+myLeft+',top='+myTop; 
				}
				
				if (arguments[2]==null)
					window.open(theURL,'',features+((features!='')?',':'')+'width='+myWidth+',height='+myHeight); 
				else		
					window.open(theURL,arguments[2],features+((features!='')?',':'')+'width='+myWidth+',height='+myHeight); 
			}	

Open in new window



i want to convert into a jquery modal using colorbox which i can do

But here is a catch, i am opening one popup for captcha and once the captcha is ok, i want to the window closed and should trigger the above function to open popup window
0
Scroll image vertically, and when user selects image in the scroll, the bigger image will display.  I have the code below, and the scroll is working, but the image won't display. I also want the image display on the left side of the scroll images.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="jquery.jcarousel.pack.js"></script>
<!--
  jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="jquery.jcarousel.css" />
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="skin.css" />

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        vertical: true,
        scroll: 2
    });
});


function showIt(link) { 
  document.getElementById('img').innerHTML='<img src="'+link.href+'" />' 
  document.getElementById('imgTitle').innerHTML=link.title 
  return false; 
} 
 

</script>
</head>
<body>
<div id="wrap">
 

  <ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
    <li><img src="images/1.jpg" width="75" height="75" alt="" /></li>
    <li><img src="images/2.jpg" 

Open in new window

0
Hi,I'm having trouble trying to change the bootstrap .active class state via jquery.I've googled and found several solutions but none of them are working for me.Here is my html code:

[code]<section id="hero">
   			<div class="container-fluid">
               <div class="container">
				   <div class="row">
						<div class="col-md-12">
							<nav class="navbar navbar-toggleable-md navbar-light">
							  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown2" aria-controls="navbarNavDropdown2" aria-expanded="false" aria-label="Toggle navigation">
								  <span class="navbar-toggler-icon"></span>
								  <span class="fas fa-times hide" data-wow-delay="2s"></span>
							  </button>
							  <a class="navbar-brand logo" href="index.php"></a>
							  <div class="collapse navbar-collapse" id="navbarNavDropdown2">
								<ul class="navbar-nav ml-auto">
								  <li class="nav-item active">
									<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
								  </li>
								  <li class="nav-item">
									<a class="nav-link" href="about.php">About Us</a>
								  </li>
								  <li class="nav-item">
									<a class="nav-link" href="howitworks.php">How it Works</a>
								  </li>
								  <?php
								  if( $_SESSION['loggedInUser'] ) { // if user is logged in
								  ?>
							      <li class="nav-item dropdown">
									<a class="nav-link" 

Open in new window

1
How to create sticky on the page?
Using CSS, HTML and JQuery.
My site is responsive.

Sticky should always be at the bottom left.

Please advise.

Regards
1
I have a small image on the right with scroll, when users click the small image, it will display a bigger image and when users click the big image, it will enlarge the image. When users click the large image. On the bigger image, there is a button link. When users scroll select the first image, the button link will direct the user to a new link page with this selected image.
Can someone give an example?
scroll-image.png
0
I have a script tag that is being inserted dynamically thru a plugin to which I don't have access too. When the site is converted to HTTPS this script tag is causing the issue of mixed content and displaying an insecure message.

The script tag is in the head tag like below

<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=xxxxxxxxx"></script>
</head>

Open in new window



I am trying to change that

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxx"></script>

Open in new window


Any advice is appreciated. The developer no longer supports the plugin so no help from that side. Also this is NOT a WordPress site

Thanks
0
when a single quote is present in data in my variables i.e. $projects_row['project_title'], $projects_row['project_detail'] then it truncate my data. These variables are receiving data from Database. I have escaped my data with addslashes and mysqli_real_escape but still data is truncated. Any solutions?

$projects_name[] = "<div class='isotope'><li class='color-shape isotope_selector ". $filter_class2."'
					id=project-id-5a01bffbcfbeb40a008b458a data-id=5a01bffbcfbeb40a008b458a>
					<span data-caticons='" . $filter_icons_all."'  data-id='" . $projects_row['id']."' data-title='" . $projects_row['project_title']."' data-detail='" . addslashes($projects_row['project_detail'])."' data-mapimage='" . $projects_row['project_image']."' data-mapgallery='" . json_encode($project_gallery_images)."'  class='li-txt' style='color:#ff0000';>
					<a id='myAnc' href='#' data-location= '".$projects_row['coords']."'>".$projects_row['project_title']."</a></span>
					<span class='thumb-container'>".$filter_icons_all."</span>			 
					</li></div>";	
					
					
echo json_encode(array("project_title"=>$project_title,"project_detail"=>$project_detail));							

Open in new window

0
I have simple web form that have
like subFeeTotalCost_1, subFeeTotalCost_2, subFeeTotalCost_3 in a loop like below.
My question is I just need to onclick event to loop the <form> and find all of the element Id has prefix called 'subFeeTotalCost_'
get the value. and sum up together. like below it will be total value = 30. I just need to use javascript, not jquery.


<td><input type="text" style="text-align:right;font-weight:900;"  readonly id="subFeeTotalCost_@item.feeId" value="10" /></td>
<td><input type="text" style="text-align:right;font-weight:900;"  readonly id="subFeeTotalCost_@item.feeId" value="20" /></td>


<br><br><br>
<input type="button" onclick="Cal()" id="btnCal" value="Cal Test" />
0
I would like to create a button on a php page that would table the records from the file on the server and load it into a mysql table.

This is a php page. It has records in the form of a table on the page. I will have the button id, the same as the file I would like to load into the mysql table. The files already reside on the server in a folder called uploaded.

Here is what I can do so far.

1. Capture the name of the file on the table with the id using jquery and ajax to push the file name to a php file that is to write the rows in the the csv file to the table.

A simple example with a field or two would be very helpful. All my fields are text as there is some characters that make the input from the csv file a little unpredictable.  

Please note the first row will have the field headings in the csv, so would need to start at row 2 and loop through the rest of the rows.
0
Starting with Angular 5
LVL 12
Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

I am stuck, I have a list of divs and h2's I want it so if all the divs in div.clflexbox are :hidden then it hides the H2 with the matching data-state

            jQuery("div[data-state]").each(function(){
                var statedata = $(this).data('state');

                if ( jQuery("div[data-state=" + statedata + "] .clad:visible").length === 0) {
                    jQuery("h2 > [data-state=" + statedata + "]").hide( );
                } else {
                    jQuery("h2 > [data-state=" + statedata + "]").show( );
                }
            });

Open in new window

0
Hi,

I have a <ul> which has <li> elements. on click function I want to get the last <li> which opacity is 0 and make its text-decoration to none.
Looking forward for help.

Thanks
0
I have a table that is being dynamically created with DataTables

I am adding a URL parameter function to the page and I need to grab values from the table based on a row number provided in the URL parameter.

I am having trouble figured out how to get specific cell values from say rows 2 and 4 based on the "row" that has been defined in the parameters.  I have the Row ID number stored using  the GetParamterByName function.

// URL PARAMETER CODE - Open FAQ Directly

var directID = getParameterByName('direct'); 
     
if (directID == null) {
   console.log('no direct');
}
else {

//Do the next set of code with the two values I need to grab from the row in the table.

}
  });

Open in new window


The table id is "#faq_table". the first column of the table is where the Row ID is (and this is a unique ID value).  I need to store the values in from column 2 and 4 in the table and use them in a pop up window (I have that part ready to go).

Any help would be appreciated.

Regards,

Adam
0
I was using Gmap2 in my PHP webpage and I noticed that suddenly it stops displaying google map even on my hosting and well as on my localhost in different folders.

It seems that issue is from Google Gmap2, but is there any proof from google?
0
I am using a function that is essentially a loader or spinner that is supposed to just run while a div loads and then stops running after the div loads.  However, I'm having a hard time knowing how to stop the spinner after a certain div loads.  

var newSpinner = function () {
    $("#loader2").hide();
    function show_second_img() {
        $("#loader1").hide();
        $("#loader2").show();
        //show first image after 2 seconds
        setTimeout(show_first_img, 4000);
    }
    function show_first_img() {
        $("#loader1").show();
        $("#loader2").hide();
        //show second image after 4 seconds
        setTimeout(show_second_img, 10000);
    }
    //show second image after 28 seconds
    setTimeout(show_first_img, 0);

};

Open in new window

0
I'm quite new to this and need some help with a custom asp.net custom validator.

I have a function that adds a validator dynamically to an input. For checkboxes I have written a custom validator.

function AddValidator(controlId, validationMessage, isCheckBox = false) {
    if (typeof (Page_Validators) == 'undefined') return;
    // first remove validator so we do't add more than 1
    removeValidator(controlId);
    // Create new validator
    var newValidator = document.createElement('span');
    newValidator.style.display = "none";
    newValidator.display = "Dynamic";
    newValidator.id = "RequiredFieldValidator" + controlId;
    newValidator.controltovalidate = controlId;
    newValidator.errormessage = "<a href='#" + controlId + "_label' onclick='javascript:scrollToAndFocus(\"" + controlId + "_label\"" + ",\"" + controlId + "\");return false'>" + validationMessage + "is required.</a>";
    newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
    newValidator.initialvalue = "";
    newValidator.evaluationfunction = (isCheckBox == true) ? CheckBoxCheckedValidator : RequiredFieldValidatorEvaluateIsValid;
    Page_Validators.push(newValidator);
    $("#" + controlId + '_label').parent().removeClass('info');
    $("#" + controlId + '_label').parent().addClass('info required');
}

Open in new window


I then add the validator with this snippet
AddValidator($(this).attr("id"),"Validation Message ",true);

Open in new window


And the custom function is here:
function CheckBoxCheckedValidator()
{
return $(this).prop("checked") ;
}

Open in new window


What this is trying to do is to return false if the checkbox is not checked, and true if it is. But the control that is passed into this custom function is not the checkbox itself, rather it is the control created in the AddValidator function (i.e. RequiredFieldValidatorMyControlName )
So the question is, how do I get to the control itself, to check it's current checked status.
Thanks
0

jQuery

17K

Solutions

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Related Topics