I want to summarize my HTML code and making a component by Javascript. My Html code contains a list of the picture that I put them in <li> tags. every picture has a special link, and a number into a <div> tag.how can I make a pattern for generating them by javascript?
Also, I want to sort these pics by that numbers, according to, highest to lowest, and I don't know how to do that. Totally, Is it true to summarize HTML code in this way?
<ul class="product-list">
<li class="product-item">
<a id="producItem1" href="page2.htm">
<img class="clothes" src="dress1.jpg">
</a>
<div class="price-holder">
<p id="price1">250,000</p>
</div>
</li>
<li class="product-item">
<a id="producItem2">
<img class="clothes" src="coat1.jpg">
</a>
<div class="price-holder">
<p id="price2">350,000</p>
</div>
</li>
<li class="product-item">
<a id="producItem3">
<img class="clothes" src="shirt1.jpg">
</a>
<div class="price-holder">
<p id="price3">150,000</p>
</div>
</li>
<li class="product-item">
<a id="producItem4">
<img class="clothes" src="skirt1.jpg">
</a>
<div class="price-holder">
<p id="price4">200,000</p>
</div>
</li>
</ul>
use this if you want to create list from javascript data you can use objects but i used arrays because you said no server involved so you will generate the data of image names and prices manually
$(document).ready(function(){
imgz=['dress1.jpg', 'coat1.jpg', 'shirt1.jpg', 'skirt1.jpg','dress2.jpg'];
prices=[100000, 200000, 150000, 250000, 300000];
linkz=['page1.htm','page2.htm','page3.htm','page4.htm','page5.htm'];
//linkz=[];imgz.forEach((v,i)=>{linkz[i]='page'+(i+1)+'.htm';});
imgz.map((z,i)=> $('body').append(`
<li class="product-item">
<a id="producItem${i+1}" href='${linkz[i]}'>
<img class="clothes" src="${imgz[i]}">
</a>
<div class="price-holder">
<p id="price${i+1}">${prices[i]}</p>
</div>
</li>`));
});
<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js">
</script></head>
<body><ul class="product-list"></ul></body></html>
and if you want to create the links data automatically use this
linkz=[];imgz.forEach((v,i)=>{linkz[i]='page'+(i+1)+'.htm';});
instead of linkz=['page1.htm','page2.htm','page3.htm','page4.htm','page5.htm'];
Related
I'm setting up a store catalog in which I have a div with multiple list items containing 2 divs (one for picture and another one for product summary and add to cart button)
Structure would be something like this.
<div>
<ul>
<li class="product">
<div class="product-image">
<img>
</div>
<div class="product-summary">
<a class="button">Add to cart</a>
</div>
</li>
<li class="product">
<div class="product-image">
<img>
</div>
<div class="product-summary">
<a class="button">Add to cart</a>
</div>
</li>
<ul>
</div>
I want to move the Add To Cart button to the div that contains the image.
I tried with this jQuery
jQuery(document).ready(function(){
jQuery(".product-image").append(jQuery('.button'));
});
But this adds every sigle button to the image div, and I end up with 10+ add to cart buttons on every product. Is there any way to only move the button within each li element to its respective image div?
Use a .each() loop and then move the button with the same index.
let buttons = $(".button");
$(".product-image").each(function(i) {
$(this).append(buttons.eq(i));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul>
<li class="product">
<div class="product-image">
<img>Product 1
</div>
<div class="product-summary">
<a class="button">Add to cart</a>
</div>
</li>
<li class="product">
<div class="product-image">
<img>Product 2
</div>
<div class="product-summary">
<a class="button">Add to cart</a>
</div>
</li>
<ul>
</div>
This below code giving me runtime error. I just want the browser to go to top while the page is routed from footer link. It just stick to the bottom and need to scroll.
document.getElementsByClassName('homemenu').scrollTo(0, 0);
header.component.html
<header class="top-head homemenu" *ngIf="showMenu == 'home'">
<div class="container-fluid">
<div class="row" [ngClass]="{'justify-content-center': onlyLogo}">
<div class="col-3 lm-logo"><img src="/assets/images/lm-logo.svg"></div>
<div class="col-9" *ngIf="!onlyLogo">
<div class="d-flex justify-content-end">
<ul class="menu_wrap d-flex">
<ng-container *ngIf="homemenu; else individual_page">
<li>Home</li>
<li>Individuals</li>
<li>Corporate</li>
<li>Hiring Managers</li>
<li class="dropdown_menu"><a class="dropdown-toggle nav-link" [routerLink]="['/partners']" routerLinkActive="active" aria-expanded="true" data-toggle="dropdown">Partners</a>
<div class="dropdown-menu">
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico5.png">
<a href="javascript:void(0)" [routerLink]="['/partners/content-owners']" routerLinkActive="active" >Content Owner</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico3.png">
<a href="javascript:void(0)" [routerLink]="['/partners/influencers']" routerLinkActive="active" >Influencers</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico2.png">
<a href="javascript:void(0)" [routerLink]="['/partners/localmasters-for-startup']" routerLinkActive="active" >Localmasters for Startup</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico4.png">
<a href="javascript:void(0)" [routerLink]="['/partners/customer-training-solutions']" routerLinkActive="active" >Customer Training Solutions</a>
</div>
<div class="menu_item">
<img class="img-fluid" src="{{bitBucketUrl}}library/images/corporate/home/p-ico1.png">
<a href="javascript:void(0)" [routerLink]="['/partners/solution-partner-program']" routerLinkActive="active" >Solution Partner Program</a>
</div>
</div>
</li>
</ng-container>
<ng-template #individual_page>
<li>Home</li>
<li>How It Works</li>
<li>Be a Mentor</li>
</ng-template>
</ul>
<button class="btn top-btn" [routerLink]="['/login']" type="button">Sign In</button>
<!-- (click)="showSiteMap = !showSiteMap" -->
</div>
</div>
</div>
</div>
</header>
The above code works as expeceted but leave a error as shown in screenshot.
getElementsByClassName returns HTMLCollection.
You have to specify the exact item within the HTMLCollection, that you want to use scrollTo on. Ex.:
document.getElementsByClassName('homemenu')[0].scrollTo(0, 0);
Or use more modern function to query html, like querySelector. Ex.:
document.querySelector('.homemenu').scrollTo(0, 0);
To updated question
As I can see, you have that class assigned to element, that is rendered by angular. Make sure to call this function only when angular has rendered this tag.
Also, if code works as expected, then you can just check for null value the element, to get rid of the error:
document.querySelector('.homemenu')?.scrollTo(0, 0);
document.querySelector('.homemenu').scrollTo({top : 0});
I am building the UI in react.js and want to improve my JSX /HTML code to be smaller.
At the moment my JSX code takes around 70 lines of code.
This is what I am building:
And my One of the problems is that in some sentences one or more words need to be bolder.
I would like to solve that in a better way than the below implemented code.
Please find below my code HTML / JSX:
<div className="search-help" ref={(node) => this.setWrapperRef(node)}>
<div className="search-help-content">
<div className="search-help-header">
<p>Use Specific Keywords for smarter filtering - English only</p>
</div>
<div className="search-help-sections">
<div className="search-help-left-content">
<p className="search-help-section-title">Logical Operator</p>
<ul className="search-help-list">
<li className="search-help-label-spacing">
<p className="search-help-label-main">
AND
<span className="search-help-label-sub">
"TX Group" <b>AND</b> "Latest News"
</span>
</p>
</li>
<li className="search-help-label-spacing">
<p className="search-help-label-main">
NOT
<span className="search-help-label-sub">
"Pochettino" <b>NOT</b> "Mourinho"
</span>
</p>
</li>
<li className="search-help-label-spacing">
<p className="search-help-label-main">
OR
<span className="search-help-label-sub">
"Cristobal Huet" <b>OR</b> "Nico Hischier"
</span>
</p>
</li>
<li className="search-help-label-spacing">
<p className="search-help-label-main">
( )
<span className="search-help-label-sub">
<b>(</b>"Jeff Bezos" <b>OR</b> "Bill Gates" <b>OR</b>
<b>(</b> "Jack Dorsey"<b>)</b> <b>AND</b> <b>(</b>"Climate Change"<b>)</b>
</span>
</p>
</li>
</ul>
</div>
<div className="search-help-right-content">
<p className="search-help-section-title">Language</p>
<ul className="search-help-list">
<li className="search-help-label-spacing">
<p className="search-help-label-main">lang:de</p>
</li>
<li className="search-help-label-spacing">
<p className="search-help-label-main">lang:eng</p>
</li>
<li className="search-help-label-spacing">
<p className="search-help-label-main">lang:fr</p>
</li>
</ul>
</div>
</div>
</div>
</div>
Any advice or idea?
It seems extracting your <li> into a component might be a good start. Build a component, say, MyListItem and extract all repeating code there. Actual unique text will be passed there through props.
To pass different bits of text into different places you can use different props like so:
<li className="search-help-label-spacing">
<p className="search-help-label-main">
{this.props.binaryOperator}
<span className="search-help-label-sub">
"{this.props.string1}" <b>{this.props.binaryOperator}</b> "{this.props.string2}"
</span>
</p>
</li>
Ok so I have game list, which is currently styled in a thumbnail kind of view. I have made 3 other classes which when added change the child elements of the list elements to make a list view. I have one which changes the li's themselves, 2 which change the child nodes of that li.
I have two buttons which should control the users preferred view type. They have an active class which stays on to show it is the active view.
So here's the question, how do i select the li's, and there child elements, to replace the view. So when clicked, the list button will add those classes. I will also need the thumbnail view button to remove those classes but i can figure that afterwards.
The markup:
<div id="View">
<button id="boxes" class="btn active" title="Thumnbnail View" onclick="thumbview()">
<i class="fas fa-th"></i>
</button>
<button id="lines" class="btn" title="List View" onclick="listview()">
<i class="fas fa-list-ul"></i>
</button>
</div>
<div id="sortcontainer">
<li class="game" id="75">
<a href="Radiant_Defence.html">
<img src="Games_images/radiantdefence/banner_image.png">
<h2 class="title">Radiant Defence</h2>
<h2 class="date" id="2012">(2012)</h2>
<h3>75/100</h3>
</a>
</li>
<li class="game" id="80">
<a href="plantsvszombies2.html">
<img src="Games_images/Plantsvszombies2/bannerimage.jpg">
<h2 class="title">Plants vs Zombies 2</h2>
<h2 class="date" id="2013">(2013)</h2>
<h3>80/100</h3>
</a>
</li>
<li class="game" id="45">
<a href="link">
<img src="games_category_placeholder.jpg">
<h2 class="title">Some game</h2>
<h2 class="date" id="2017">(2017)</h2>
<h3>45/100</h3>
</a>
</li>
<li class="game" id="80">
<a href="link">
<img src="games_category_placeholder.jpg">
<h2 class="title">Fieldrunners 2</h2>
<h2 class="date" id="2016">(2016)</h2>
<h3>80/100</h3>
</a>
</li>
</div>
And the JavaScript I have so far (still new)
function listview() {
var container = document.getElementById("sortcontainer");
var li = container.getElementsByTagName("li");
for (var i = 0; i < li.length; i++);
li.classList.add("lilistview");
};
Thankyou in advance if anyone has any suggestions
I would like to change an image on my website into a link using Javascript so that when users click the image they are redirected to a website. My html code and Javascript code are as follows. I tried mimicking what was mentioned in this thread but was unsuccessful (how to add a link to an image using jquery?).
The image I am trying to create a link for is http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg
Thank you for your help.
My Javascript code
jQuery('.profile-avatar.open-photo-swipe').wrap($('<a>',{
href: link2;
}));
My HTML code
<div class="profile-header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div v-pre>
<a class="profile-avatar open-photo-swipe"
href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"
style="background-image: url('http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-300x300.jpg')"
data-width="1024"
data-height="576"
>
</a>
</div>
<div class="profile-name" v-pre>
<h1 class="case27-primary-text">Offer 2</h1>
<h2>blag</h2>
</div>
<div class="cover-details" v-pre>
<ul></ul>
</div>
<div class="profile-menu">
<ul role="tablist">
<li class="active">
<a href="#_tab_1" aria-controls="_tab_1" data-section-id="_tab_1"
role="tab" class="tab-reveal-switch toggle-tab-type-main">
Profile </a>
</li><li class="">
<a href="#_tab_2" aria-controls="_tab_2" data-section-id="_tab_2"
role="tab" class="tab-reveal-switch toggle-tab-type-comments">
Comments
<span class="items-counter">0</span>
</a>
</li> <div id="border-bottom"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
jQuery('.profile-avatar.open-photo-swipe')
This element is a link, not image:
<a class="profile-avatar open-photo-swipe"
href="http://mywebsite.com/wp-content/uploads/job-manager-uploads/job_cover/2017/10/bbbb-1024x1024.jpg"
So use
jQuery('.profile-avatar.open-photo-swipe').prop('href', link2)