Parallax Fixed Counter

Developer
Jennifer Tso
Size
2,968 Kb
Views
26,312
  1. Parallax Fixed Counter Previews
  2. Parallax Fixed Counter HTML Codes
  3. Parallax Fixed Counter CSS Codes
  4. Parallax Fixed Counter JS Codes

How do I make an parallax fixed counter?

What is a parallax fixed counter? How do you make a parallax fixed counter? This script and codes were developed by Jennifer Tso on 11 September 2022, Sunday.

Parallax Fixed Counter Previews
IQ Test

Parallax Fixed Counter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax Fixed Counter</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <table class="repair-factors"> <thead> <tr> <th colspan="3"> <h4 class="text-center"><b>Exterior</b></h4> </th> </tr> <tr> <td></td> <th class="text-center">Yes/No <br /> Qty</th> <th>Repair Costs</th> </tr> </thead> <tbody> <tr> <td>Roof:</td> <td class="text-center"> <asp:CheckBox ID="cbxExtRoof" runat="server" /></td> <td> <asp:TextBox ID="txtExtRoof" runat="server" Style="text-align: right" Columns="7"></asp:TextBox></td> </tr> <tr> <td>Windows:</td> <td> <asp:DropDownList ID="ddlExtWindowQty" runat="server" /></td> <td> <asp:TextBox ID="txtExtWindow" runat="server" Style="text-align: right" Columns="7"></asp:TextBox></td> </tr> <tr> <td>Doors:</td> <td> <asp:DropDownList ID="ddlExtDoorQty" runat="server" /></td> <td> <asp:TextBox ID="txtExtDoor" runat="server" Style="text-align: right" Columns="7"></asp:TextBox></td> </tr> <tr> <td>Patio Doors:</td> <td> <asp:DropDownList ID="ddlExtPatioDoorQty" runat="server" /></td> <td> <asp:TextBox ID="txtExtPatioDoor" runat="server" Style="text-align: right" Columns="7"></asp:TextBox></td> </tr> <tr> <td>Paint:</td> <td class="text-center"> <asp:CheckBox ID="cbxExtPaint" runat="server" AutoPostBack="True" /></td> <td> <asp:TextBox ID="txtExtPaint" runat="server" Style="text-align: right" Columns="7"></asp:TextBox></td> </tr> <tr> <td>Siding:</td> <td class="text-center"> <asp:CheckBox ID="cbxExtSiding" runat="server" AutoPostBack="True" /></td> <td> <asp:TextBox ID="txtExtSiding" runat="server" Style="text-align: right" Columns="7"></asp:TextBox></td> </tr> <tr> <td>Driveway:</td> <td> <asp:DropDownList ID="ddlExtDriveway" runat="server"> <asp:ListItem></asp:ListItem> <asp:ListItem>Small</asp:ListItem> <asp:ListItem>Medium</asp:ListItem> <asp:ListItem>Large</asp:ListItem> </asp:DropDownList> </td> <td> <asp:TextBox ID="txtExtDriveway" runat="server" Style="text-align: right" Columns="7"></asp:TextBox></td> </tr> <tr> <td>Other:</td> <td> <asp:HyperLink ID="lnkExtNotes" runat="server" Target="_blank">Add Notes</asp:HyperLink></td> <td> <asp:TextBox ID="txtExtOther" runat="server" Style="text-align: right" Columns="7"></asp:TextBox></td> </tr> <tr> <td> <%--<button type="button" onclick="addWindow()">+ Window</button>--%> </td>
<td> <asp:Button ID="btnExteriorTotal" runat="server" Text="Update" CssClass="button" />
</td>
<td class="text-center"> <asp:Label ID="lblExtTotal" runat="server" />
</td>
</tr>
<tr> <td colspan="3" class="text-center"> <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> <img alt="" src="../../../Icons/UpdateProgress.gif" /> Updating....... </ProgressTemplate> </asp:UpdateProgress> </td>
</tr>
</tbody>
</table>
<div class="window-counter" id="window-counter"> <div class="row"> <div class="small-4 columns"> <label for="qty"> Exterior Windows: </label> </div> <div class="small-8 columns"> <input id="qty" value="0" /> </div> </div> <div class="row column"> <ul class="counter-btn"> <li><button onclick="modify_qty(-1)" class="button">-1</button></li> <li><button onclick="modify_qty(1)" class="button">+1</button></li> </ul> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Parallax Fixed Counter - Script Codes CSS Codes

body { height: 4000px; padding-top: 5%;
}
table.repair-factors { width: 100%; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
table.repair-factors thead { background: #0099DD; color: white; border: none;
}
.window-counter { /*background: #0099DD; color: white;*/ border: 5px solid #0099DD; margin: 5% 0; padding: 5% 2% 3%;
}
.window-counter > div > div > input#qty { /*background: transparent;*/ /*color: white;*/ /*border: none;*/ max-width: 100%; padding: 0 0 0 3%;
}
ul.counter-btn { margin: 4% 0 0;
}
ul.counter-btn > li { display: inline-block;
}
.window-counter.fixed, #window-counter.fixed { position: fixed; background: pink; bottom: 0;
}

Parallax Fixed Counter - Script Codes JS Codes

$(document).ready(function() { // console.log('I work now!'); var windowCounter = $('.window-counter'); windowCounter.on('scroll', function(e) { if (this.scrollTop > 1000) { console.log('I am here.'); windowCounter.addClass('fixed'); } else { windowCounter.removeClass('fixed'); } });
});
// Script for Window Counter
function modify_qty(val) { var qty = document.getElementById('qty').value; var new_qty = parseInt(qty, 10) + val; if (new_qty < 0) { new_qty = 0; } document.getElementById('qty').value = new_qty; return new_qty;
};
Parallax Fixed Counter - Script Codes
Parallax Fixed Counter - Script Codes
Home Page Home
Developer Jennifer Tso
Username jen188
Uploaded September 11, 2022
Rating 3
Size 2,968 Kb
Views 26,312
Do you need developer help for Parallax Fixed Counter?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jennifer Tso (jen188) Script Codes
Name
REP F6 Small Overriding Large Breakpoint
Print Worksheet Alignment Issue
A Pen by Jennifer Tso
F6 Overlay Menu
Simple Phone Number Picker
Foundation 6 Mega Menu
Foundation 6 Callout Margin Adjustment
Owl Carousel 2 Autoplay and URL Hash Nav Conflict
Owl Carousel 2 URL Hash Nav Issue
Foundation 6 Tabs and Equalizer Issues
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!