jQuery Help

Question by

Rabbit W

1d ago

Navigation

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 Comments

Introduction to R

LVL 12

R is considered the predominant language for data scientist and statisticians. Learn how to use R for your own data science projects.

Question by

Rabbit W

1d ago

Images

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

15 Comments

Question by

Rabbit W

2d ago

Compare the items

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 Comments

LVL 8

Question by

Camillia

2d agoSolvedPrivate

Knockout and MVC Razor

We want to reskin our application (ASP.Net , C#, JQuery) using this template https://themeforest.net/item/minotaur-angular-admin-dashboard/19319935

That template comes with Angular and jQuery but we're going to use the jQuery version.

I want to replace our CSS with the template's CSS and rework the pages and reskin.

We have a new guy on our team who's worked with Knockout. He said something like we can wire up Knockout and spit out Razor pages with the new look-and-feel/css.
Anyone has done something like that? where can I find more info?

8 Comments

LVL 1

Question by

ITsolutionWizard

2d ago

MVC, auto scroll

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

2 Comments

Question by

Rabbit W

3d ago

Retrieve the images

Add the image like (img/big/red.jpg) etc. to mySQL, and retrieve the images.

6 Comments

Question by

Rabbit W

4d ago

Display images

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

12 Comments

Question by

Rabbit W

4d ago

Compare Items

Add the compare checkbox in the product category page. When users check the checkbox under the item, the item image will be added like the following link. How to accomplish it?

Thank you!
https://www.costco.com/CatalogSearch?dept=All&pageSize=96&keyword=computerhpf1127

13 Comments

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-

4 Comments

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

2 Comments

Learn SQL Server Core 2016

LVL 12

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

LVL 8

Question by

Camillia

4d agoSolvedPrivate

A generic Ajax/jQuery code to get data?

We were talking about replacing out Grid.MVC with jQuery DataTables.

Suppose we have 10 pages. Each page has a grid but goes to a different datasource to get the data. Different columns, etc.

The developer on our team mentioned something about having a generic jQuery/AJAX code .... only ONE ... for all the pages. How would that work? is he correct that we can only have one jQuery file?

Ex: User is on page1 and want to get data from table1. If it's true that we can only have one jQuery code to make an AJAX call...how can we tell it to this is page1 and go to table1. Then, how can we tell it this is page2 and go to table2 to get data?

jQuery
AJAX

2 Comments

LVL 8

Question by

Camillia

4d agoSolvedPrivate

Need advice to help guide my manager thru our major re-skinning project

I have no idea how to make my manager understand that we can't jump into a reskinning of our site. The project was done about 4 yrs ago by some contractors. It's C#, ASP.Net, jQuery. It looks like the generic ASP.Net out of the box.

I've used Themeforest before and I got this template https://themeforest.net/item/minotaur-angular-admin-dashboard/19319935

This is what I've suggested:

1. Use the jQuery version of the template to save time and not rewrite the entire code in Angular or something new
2. I am creating a prototype of our site by hardcoding some pages
3 . Current code uses Grid.MVC and I want to replace them with DataTables
4. Spme code clean up is probably needed
5. I wanted to add Leaflet.js Heatmap or map but my manager doesn't have a clear direction on this
6 . Wanted to do charts but no clear direction on this either
7. I want a project plan

This is my manager
1. I have the landing page and side menu in the prototype. He only looked at these and said we're ready to go
2. Explained to him that Grid.MVC with DataTables but he thinks it's just replacing the grids with no much coding
3. He says he doesn't want the prototype to be a 6 months project

This is what my developer friend says

1. Your manager doesn't care about a plan. He just wants to do it and you're not going to change his mind
2. Document everything so when it fails you have documentation
3. In the end he's the boss, if you don't agree with him after …

6 Comments

I have a jquery grid. When a row is selected, I load a div with a page returned from a controller, using $("divTarget").load("/Mycontroller/Edit/123"). this works perfectly the first time and the data is stored to the database. I reload the grid and the change is there, but when I click the row again to edit the same record, the controller isn't even called!

Any help appreciated.

5 Comments

Searching though a JSON with php and jquery

I have some code that querys a DB with php and put the info in a json array here is my code

<html>
<head>
<title>Search</title>
<link rel="stylesheet" type="text/css" href="PrintMeThatLabel.css" />
<script src = "cookie.js" type="text/javascript"> </script>

<script src = "jquery-1.4.3.min.js" type="text/javascript"> </script>
<script src = "http://www.labelwriter.com/software/dls/sdk/js/DYMO.Label.Framework.3.0.js" type="text/javascript" charset="UTF-8"> </script>
<script src = "PrintMeThatLabel2.js" type="text/javascript" charset="UTF-8"> </script>
<style type=text/css>

.text {color: #000; font-family:Arial, Helvetica, sans-serif }
.head {color: #000; font-family:Arial, Helvetica, sans-serif }
.input {display:none;}



.tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}
.tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}
.tftable tr {background-color:#d4e3e5;}
.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}
.tftable tr:hover {background-color:#ffffff;}




</style>

</head>
<body>


    <div class=text align="center">

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" >

<span class=text>Enter Work Order #: </span>
<input type="text"  name="Work_Order" length="30"  value="">


<input

Open in new window

…

15 Comments

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.

2 Comments

Hi Team,

Need to detect internet explorer browser version when viewing in compatibility mode.

I was trying to use feature detection for the above and so used modernizer(js library) but unfortunately, it is not working. Is there any way through which I could do this feature detection.

Appreciate your response.

Thank You

4 Comments

LVL 16

Question by

Gurpreet Singh Randhawa

2018-11-24

modifying code to open popup

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

1 Comment

Question by

Rabbit W

2018-11-20

scroll images

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

…

2 Comments

Hi Experts,
I am trying to do a Captcha implementation. For some reason it is giving me the error "Uncaught TypeError: $ is not a function". Any help is greatly appreciated.

Thanks in advance.

@using CaptchaMvc.HtmlHelpers

<h1 class="spacer-20">@T("Reset your password")</h1>
@using (Html.BeginFormAntiForgeryPost("/Users/Account/LogOn/ForgotPassword", FormMethod.Post))
{
    @Html.Hidden("url_success", string.Empty)
    @Html.Hidden("url_fail", string.Empty)
    @Html.ValidationSummary()
<div class="login-page">
    <h3>@T("Your username")</h3>
    @Html.TextBox("username", string.Empty, new { maxlength = 50 })
   @Html.MathCaptcha()

    <div class="spacer-40">
        <input id="btnSubmit" class="critical button" type="submit" value="@T("Submit")" />
    </div>
    <div class="spacer-20"></div>
</div>
}

Open in new window

Giving error near the $ sign.

<script type="text/javascript">
$(function () {$('#b20b155dd1fb4b6d92d9a47ddf2550c4').show();})
function ______c0f11654da8c4103bc4724cc881fc967________() { $('#b20b155dd1fb4b6d92d9a47ddf2550c4').hide(); $.post("", { t: $('#CaptchaDeText').val(), __m__: "0" }, function(){$('#b20b155dd1fb4b6d92d9a47ddf2550c4').show();}); return false; }</script>

Open in new window

27 Comments

Bootstrap 4: Exploring New Features

LVL 12

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

LVL 7

Question by

Daniel Pineault

2018-11-20Solved

Reopen modal buttons no longer work?

I'm struggling to close a modal window and then reopen it.

Upon submitting a modal I use

$('form#{$model->formName()}').on('beforeSubmit', function(e){
    var \$form = $(this);
    $.post(
        \$form.attr("action"), //serialize Yii2 form 
        \$form.serialize()
    )

    .done(function(result){
        //console.log(result);
        result = JSON.parse(result);
        if(result.status == 'Success'){
            $(\$form).trigger("reset");
            // $.pjax.reload({container:'#InvoiceItemsListGrid'}); //Does not work and reloads the main page, not the modal window?!
            $("#closeButton3").click(); //Close the 3rd modal
            $("#closeButton2").click(); //Close the 2nd modal
            $("#"+$('#modalPopup2 #passInfo #refBtn').val()).click(); //re-open the 2nd modal by clicking on the appro button to refresh the info
        }else{
            $(\$form).trigger("reset");
            $("#message").html(result.message);
        }
    })

    .fail(function(){
        console.log("server error");
    });

    return false;
});

Open in new window

Now, although not the way I wanted to handle this, it does work in a general sense. It closes the 2 modal windows and then reopens the second one displaying the submission. The issue I'm facing is that if I close the modal and then reopen it, none of the buttons works. They all loose their event and I don't get why?

I've been at this for 2 days and just can't figure it out. I've tried all sorts of things.

Thank you in advance.

4 Comments

How would I check in JavaScript (jQuery ok but not preferred) if a div class starts with the word "modal" and has a specific ID? So for the below example, I'd want to check if div started with "modal" and has an ID of "existingAppModalBox". I will have a list of IDs I need to check against but this will always be against a div with a class starting with the word "modal"? Or would it be easier to just check for the specific ID? My challenge is that these are modals so they have to be visible, thoughts?

<div class="modal in confirmationModal" tabindex="-1" role="dialog" id="existingAppModalBox" data-hard-modal="True" style="display: none;" aria-hidden="true">

Open in new window

Thanks!

3 Comments

I've got a form that is used for ordering t-shirts. Different sizes, different prices, tax, total are all good. Up to now, we've only offered in-store pick up but now, they want to add home delivery for a small fee.

On the form, the delivery fees are initially hidden. If someone selects delivery, the delivery total fades in and shows $4. Click back on store pickup and delivery option fades out and the amount changes back to 0.

I need help with integrating that into the grand total calculation so that clicking on delivery adds $4 and clicking on store pickup removes it if the delivery option was selected or does nothing if it isn't. And do it in such a way that it works with the key-up events of the order fields.

I could really use some help with this as we're trying to get this launched before the holidays. Many thanks in advance.

I've got a fiddle showing what it's currently doing - and the code below:

jsfiddle.net/saabStory/936wkx7v/6/

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta http-equiv="Expires" content="Tue, 01 Jan 1995 12:12:12 GMT">
        <meta http-equiv="Pragma" content="no-cache">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <style type="text/css">

Open in new window

…

3 Comments

I use DataTables all through our site and really look the grouped tables. Is there a way to dynamically pass in the number of columns? I have several instances used that all I do is change the number of columns. It would be nice to be able to use it globally.

$('table.groupedtable').DataTable({
"aaSorting": [],
"pageLength": 1000,
"columnDefs": [
{ "visible": false, "targets": 1 }
],
"drawCallback": function (settings) {
var api = this.api();
var rows = api.rows({ page: 'current' }).nodes();
var last = null;
api.column(1, { page: 'current' }).data().each(function (group, i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr class="group"><td colspan="5">' + group + '</td></tr>'
);
last = group;
}
})
}
});

1 Comment

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

…

9 Comments

Question by

Aaron Roessler

2018-11-18Solved

Simple jQuery fix

I know this is a VERY simple fix but I just dont understand whats wrong with this code. Just wanted to stop the Enter key from submitting the form.

jQuery(document).on( "keypress", ".gform_wrapper", function (e) {
var code = e.keyCode || e.which;
if ( code == 13 && ! jQuery( e.target ).is( "textarea,input[type="submit"],input[type="button"]")) {
e.preventDefault();
return false;
}
});

jQuery

3 Comments

jQuery

Related Topics

jQuery

Related Topics