i have the following code in which i have images and on them i have dislike. i want to identify on which image the dislike has been clicked? how do i do that?
<div class="product_title">Levi's Men's Cotton T-Shirt</div>
<div class="product_img"><img src="images/T1.jpg" alt="" border="0" id="T1"/></div>
<div class="product_img"><img src="images/dislike.jpeg" onclick="getId();" align="right" id="d1"/></a></div>
<div class="prod_price"><span class="reduce">350$</span> <span class="price">270$</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab"> <img src="images/cart.gif" alt="" border="0" class="left_bt" /> <img src="images/favs.gif" alt="" border="0" class="left_bt" /> <img src="images/favorites.gif" alt="" border="0" class="left_bt" /> details </div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title">UB Stylish T-shirt</div>
<div class="product_img"><img src="images/T2.jpg" alt="" border="0" id="T2"/></div>
<div class="product_img"><img src="images/dislike.jpeg" alt="" border="0" align="right" id="d2"/></a></div>
<div class="prod_price"><span class="price">270$</span></div>
</div>
<div class="bottom_prod_box"></div>
<div class="prod_details_tab"> <img src="images/cart.gif" alt="" border="0" class="left_bt" /> <img src="images/favs.gif" alt="" border="0" class="left_bt" /> <img src="images/favorites.gif" alt="" border="0" class="left_bt" /> details </div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title">Jacob n John T-Shirt</div>
<div class="product_img"><img src="images/T3.jpg" alt="" border="0" id="T3" /></div>
<div class="product_img"><img src="images/dislike.jpeg" alt="" border="0" align="right" id="d3"/></a></div>
<div class="prod_price"><span class="reduce">350$</span> <span class="price">270$</span></div>
</div>
You can bind the dislike image button with onclick event. Find the id of the element and then use the id to find the product id.
As your markup is structured, id of element is di then corresponding id of product is ti.
Related
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<script type="text/javascript" src="javascript1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style1.css" />
</head>
<body>
<div class="wrap">
<div class="sec1">
<div class="logo">
<img src="../images/logo.png" width="100%" height="150px">
</div>
<div class="heading">
<h1 style="color:lawngreen;">CITY STORE
<br>KIRANA & GENERAL</h1>
</div>
</div>
<div class="sec2">
<div class="menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>GALLERY</li>
<li>SERVICES</li>
</ul>
</div>
</div>
<div class="slider">
<!-- Start WOWSlider.com BODY section -->
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/1.jpg" alt="" title="" id="wows1_0" />
</li>
<li><img src="data1/images/p2.jpg" alt="" title="" id="wows1_1" />
</li>
<li><img src="data1/images/p3.jpg" alt="" title="" id="wows1_2" />
</li>
<li><a href="http://wowslider.net"><img src="data1/images/p4.png" alt="bootstrap slider"
title="" id="wows1_3" /></a></li>
<li><img src="data1/images/p5.jpg" alt="" title="" id="wows1_4" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<span><img src="data1/tooltips/1.jpg" alt="" />1</span>
<span><img src="data1/tooltips/p2.jpg" alt="" />2</span>
<span><img src="data1/tooltips/p3.jpg" alt="" />3</span>
<span><img src="data1/tooltips/p4.png" alt="" />4</span>
<span><img src="data1/tooltips/p5.jpg" alt="" />5</span>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">wow slider
by WOWSlider.com
v9.0</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div class="pre-sec3-bar"></div>
<div class="sec3">
<div class="sec3-heading">
<h1>WELCOME TO CITY STORE</h1>
<h2>WHY
CHOOSE US ?</h1>
</h2>
</div>
<div class="sec3-content">
<div class="sec3-content-pic"><img src="../images/p6.png" width="100%" height="350px"></div>
<div class="sec3-content-para">
<h3>CITY STORE GROCERIES.</h3>
</div>
</div>
</div>
<div class="sec4">
<div class="sec4-para"><img src="../images/img2.png" width="100%" height="363px"></div>
<div class="sec4-image"><img src="../images/shop.jpg" width="100%" height="360px"></div>
</div>
<div class="sec5">
<div class="sec5-img"><img src="../images/shop3.jpg" width="100%" height="430px"></div>
<div class="sec5-para">
<h3>.</h3>
</div>
</div>
<div class="sec6">
<div class="sec6-header">
<h3>OUR BRANDS</h3>
</div>
<div class="marquee">
<marquee direction="left" scrolldelay="2"><img src="../images/b1.jpg" width="150px" height="150px">
<img src="../images/b2.jpg" width="150px" height="150px">
<img src="../images/b3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
<img src="../images/b5.jpg" width="150px" height="150px">
<img src="../images/b6.jpg" width="150px" height="150px">
<img src="../images/c1.jpg" width="150px" height="150px">
<img src="../images/c2.jpg" width="150px" height="150px">
<img src="../images/c3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
</marquee>
</div>
</div>
<div class="foot">
<h4>(c)2020 SHOP RITE.All Rights Reserved.Powered
by NashInfotech.</h4>
</div>
</div>
</body>
</html>
javascript1.js
document.getElementByclassName("menu ul li").style.padding = "1.5vh 50px
1.5vh 50px";
CSS
.menu{
width:100%;
opacity:70%;
}
.menu ul{
width:100%;
display:inline;
}
.menu ul li{
font-size: x-large;
float: left;
list-style: none;
text-decoration: none;
color:yellow;
background-color:green;
padding:1.5vh 86px;
}
I have done the coding so when the page opens it should show menu shrunk from 86px to 50px, but it is showing 86px right and left padding. The Javascript code is not reflecting. My goal is to obtain a screen width constant and then changing the padding according to it using Javascript. But first as I'm new to Javascript I just wanted to test if my Javascript code is working or not and it's not reflecting.
This will not work, because you are mixing class name and tag name.
Please, use document.querySelector or document.querySelectorAll if you need to update all findings.
document.querySelector('.menu ul li').style.padding = "1.5vh 50px 1.5vh 50px";
[...document.querySelectorAll('.menu ul li')].forEach(el=> el.style.padding = "1.5vh 50px 1.5vh 50px")
UPDATE Here is a working demo for the provided markup. Everything works perfectly. The issue is here: <script type="text/javascript" src="javascript1.js"></script> You loads your JS before DOM. So when JS starts working, it can't find the expected DOM elements cause they are not yet loaded. To fix the issue, move JS to the bottom of the file.
[...document.querySelectorAll('.menu ul li')].forEach(el=> el.style.padding = "1.5vh 50px 1.5vh 50px");
<div class="wrap">
<div class="sec1">
<div class="logo">
<img src="../images/logo.png" width="100%" height="150px">
</div>
<div class="heading">
<h1 style="color:lawngreen;">CITY STORE
<br>KIRANA & GENERAL</h1>
</div>
</div>
<div class="sec2">
<div class="menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>GALLERY</li>
<li>SERVICES</li>
</ul>
</div>
</div>
<div class="slider">
<!-- Start WOWSlider.com BODY section -->
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/1.jpg" alt="" title="" id="wows1_0" />
</li>
<li><img src="data1/images/p2.jpg" alt="" title="" id="wows1_1" />
</li>
<li><img src="data1/images/p3.jpg" alt="" title="" id="wows1_2" />
</li>
<li><a href="http://wowslider.net"><img src="data1/images/p4.png" alt="bootstrap slider"
title="" id="wows1_3" /></a></li>
<li><img src="data1/images/p5.jpg" alt="" title="" id="wows1_4" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<span><img src="data1/tooltips/1.jpg" alt="" />1</span>
<span><img src="data1/tooltips/p2.jpg" alt="" />2</span>
<span><img src="data1/tooltips/p3.jpg" alt="" />3</span>
<span><img src="data1/tooltips/p4.png" alt="" />4</span>
<span><img src="data1/tooltips/p5.jpg" alt="" />5</span>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">wow slider
by WOWSlider.com
v9.0</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div class="pre-sec3-bar"></div>
<div class="sec3">
<div class="sec3-heading">
<h1>WELCOME TO CITY STORE</h1>
<h2>WHY
CHOOSE US ?</h1>
</h2>
</div>
<div class="sec3-content">
<div class="sec3-content-pic"><img src="../images/p6.png" width="100%" height="350px"></div>
<div class="sec3-content-para">
<h3>CITY STORE GROCERIES.</h3>
</div>
</div>
</div>
<div class="sec4">
<div class="sec4-para"><img src="../images/img2.png" width="100%" height="363px"></div>
<div class="sec4-image"><img src="../images/shop.jpg" width="100%" height="360px"></div>
</div>
<div class="sec5">
<div class="sec5-img"><img src="../images/shop3.jpg" width="100%" height="430px"></div>
<div class="sec5-para">
<h3>.</h3>
</div>
</div>
<div class="sec6">
<div class="sec6-header">
<h3>OUR BRANDS</h3>
</div>
<div class="marquee">
<marquee direction="left" scrolldelay="2"><img src="../images/b1.jpg" width="150px" height="150px">
<img src="../images/b2.jpg" width="150px" height="150px">
<img src="../images/b3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
<img src="../images/b5.jpg" width="150px" height="150px">
<img src="../images/b6.jpg" width="150px" height="150px">
<img src="../images/c1.jpg" width="150px" height="150px">
<img src="../images/c2.jpg" width="150px" height="150px">
<img src="../images/c3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
</marquee>
</div>
</div>
<div class="foot">
<h4>(c)2020 SHOP RITE.All Rights Reserved.Powered
by NashInfotech.</h4>
</div>
</div>
Visit https://www.w3schools.com/jsref/met_document_queryselector.asp.
Try with "document.querySelector('.menu ul li').style.padding = "1.5vh 50px 1.5vh 50px";"
I have a div in the middle of html page.
It has 4 links that have images inside and some text.
What I need is this : when a user clicks on one of those links, it completely changes the div ( without reloading the page ), which will have an image, another text and a link. Those 4 links need to stay there, so that user can click on another one and get the same change again.
I couldn't write or find any code that helps me beyond replacing or toggling functions, which are good for 2 elements only.
Here's my HTML markup:
<div class="container-fluid fullspan offers_content" id="offers_content">
<div class="row offers">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offers_text col-md-7">
<p> text </p>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_1">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer1.png" alt="" class="img-responsive offer_image" />
<p>text-111</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_2">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer2.png" alt="" class="img-responsive offer_image" />
<p>text-222</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_3">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer3.png" alt="" class="img-responsive offer_image" />
<p>text-333</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_4">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer4.png" alt="" class="img-responsive offer_image" />
<p>text-444</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
My relevant CSS:
.offers_content{
min-height:450px;
background-color:#fff;
}
#offer_quickstart,#offer_quickstartplus, #offer_basic, #offer_pro{
display:none;
}
#offers_content{
display:block;
}
.offer_image{
margin: 5% auto auto auto;
}
.offer_text_ad>p{
color:#000;
}
Thanks in advance.
Use Javascript and do something along the lines of:
function swapDivs(div1, div2) { // where div 1 will disappear and div 2 will take its place
document.getElementById(div1).className('hidden');
document.getElementById(div2).className('shown');
}
and then CSS like
.hidden {
top: -500px; // forces div above the screen
}
.shown {
// CSS code for the div you want shown
}
And in the HTML with the link it could be
<a onclick="javascript:swap('rowOffers','row');"><img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/></a>
Just use "swap('div you want hidden', 'div you want shown')" as you need to.
So the end result will make the first div disappear and the second reappear in its place. So initially code the div you want shown from the beginning set its class to "shown" and then all the other divs as "hidden".
Hopefully this has been helpful and answers your question. If not, feel free to ask anymore about it :)
I am new to angular js and was playing around with it to try and get my code to return the flag of the country when the user types it in. So far my list filters down when they start typing a country but it wont display the flag.
code:
<h2> Section Two </h2>
<div ng-app="" ng-controller="ModuleTwoController">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in filtered = (countries | filter:test)">
{{ x.country }}
</li>
</ul>
<p> Items in list: {{filtered.length}} </p>
<div ng-switch on="countries">
<div ng-switch-when="filtered.value === "Argentina">
<img src="argentina.jpg" height="150" width="200">
</div>
<div ng-switch-when="USA">
<img src="usa.jpg" height="150" width="200">
</div>
<div ng-switch-when="Brazil">
<img src="brazil.jpg" height="150" width="200">
</div>
<div ng-switch-when="Hong Kong">
<img src="hongkong.jpg" height="150" width="200">
</div>
<div ng-switch-when="UK">
<img src="uk.jpg" height="150" width="200">
</div>
<div ng-switch-when="Turkey">
<img src="turkey.jpg" height="150" width="200">
</div>
<div ng-switch-when="Rwanda">
<img src="rwanda.jpg" height="150" width="200">
</div>
<div ng-switch-when="Federated States of Micronesia">
<img src="fsom.jpg" height="150" width="200">
</div>
<div ng-switch-when="India">
<img src="india.jpg" height="150" width="200">
</div>
<div ng-switch-when="South Africa">
<img src="southafrica.jpg" height="150" width="200">
</div>
what do i need to add to make it give me the results i want? I also only want the flag to appear when there is one country in the list. so for example if i type in 'u' usa, uk, turkey and south africa are all returned. but then if i type 'us' only the usa is returned. that is the only point i want a flag returned.
Here is your solution code Please Check
HTML
<h2> Section Two </h2>
<div ng-app="myApp" ng-controller="ModuleTwoController">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in filtered = (countries | filter:test)">
{{ x.country }}
</li>
</ul>
<p> Items in list: {{filtered.length}} </p>
<div ng-show="filtered.length == 1" >
<div ng-switch on="filtered[0].country">
<div ng-switch-when="Argentina">
<img src="Argentina.jpg" height="150" width="200">
</div>
<div ng-switch-when="USA">
<img src="usa.jpg" height="150" width="200">
</div>
<div ng-switch-when="Brazil">
<img src="brazil.jpg" height="150" width="200">
</div>
<div ng-switch-when="Hong Kong">
<img src="hongkong.jpg" height="150" width="200">
</div>
<div ng-switch-when="UK">
<img src="uk.jpg" height="150" width="200">
</div>
<div ng-switch-when="Turkey">
<img src="turkey.jpg" height="150" width="200">
</div>
<div ng-switch-when="Rwanda">
<img src="rwanda.jpg" height="150" width="200">
</div>
<div ng-switch-when="Federated States of Micronesia">
<img src="fsom.jpg" height="150" width="200">
</div>
<div ng-switch-when="India">
<img src="india.jpg" height="150" width="200">
</div>
<div ng-switch-when="South Africa">
<img src="southafrica.jpg" height="150" width="200">
</div>
<div ng-switch-default>
Nothing
</div>
</div>
</div>
</div>
JsCode
var app = angular.module('myApp', []);
function ModuleTwoController($scope) {
$scope.countries = [{country:'Argentina'},
{country:'USA'},
{country:'Brazil'},
{country:'Hong Kong'},
{country:'UK'},
{country:'Turkey'},
{country:'Rwanda'},
{country:'Federated States of Micronesia'},
{country:'India'},
{country:'South Africa'}
];
}
and here is the working example
JsFiddle
I have a markup like this:
<div class="row">
<div class="col col-50" ng-repeat="picture in pictures.slice().reverse()">
<a href="instagram://media?id={{picture.id}}" title="{{picture.caption.text}}" target="_blank">
<img ng-src="{{picture.images.standard_resolution.url}}" width="100%" height="auto" alt="{{picture.caption.text}}" />
</a>
</div>
</div>
I'm trying to create an even layout, with two images every row. The issue is, I need to add a new row every two, so my ng-repeat isn't working. For example, the markup should look something like this once it's rendered:
<div class="row">
<div class="col col-50">
<a href="instagram://media?id=213" title="Blah blah" target="_blank">
<img ng-src="something" width="100%" height="auto" alt="Blah blah" />
</a>
</div>
<div class="col col-50">
<a href="instagram://media?id=213" title="Blah blah" target="_blank">
<img ng-src="something" width="100%" height="auto" alt="Blah blah" />
</a>
</div>
</div>
<div class="row">
<div class="col col-50">
<a href="instagram://media?id=213" title="Blah blah" target="_blank">
<img ng-src="something" width="100%" height="auto" alt="Blah blah" />
</a>
</div>
<div class="col col-50">
<a href="instagram://media?id=213" title="Blah blah" target="_blank">
<img ng-src="something" width="100%" height="auto" alt="Blah blah" />
</a>
</div>
</div>
Short of doing the output manually with Javascript, I'm not really sure how to do it. I've been looking at the docs, but I can't find a way to do it. Could someone suggest something, or point me in the right direction?
Using ng-switch should work as long as your pictures array is even in length.
<div class="row" ng-repeat="picture in pictures.slice().reverse()" ng-switch on="$index % 2" ng-show="$index%2==1">
<div class="col col-50" ng-switch-when="1">
<a href="instagram://media?id={{pictures[$index-1].id}}" title="{{pictures[$index-1].caption.text}}" target="_blank">
<img ng-src="{{pictures[$index-1].images.standard_resolution.url}}" width="100%" height="auto" alt="{{pictures[$index-1].caption.text}}" />
</a>
</div>
<div class="col col-50" ng-switch-when="1">
<a href="instagram://media?id={{picture.id}}" title="{{picture.caption.text}}" target="_blank">
<img ng-src="{{picture.images.standard_resolution.url}}" width="100%" height="auto" alt="{{picture.caption.text}}" />
</a>
</div>
</div>
Simple example of how this works in Fiddle:
http://jsfiddle.net/HB7LU/5711/
I am trying to cycle my image and blur the background image but the problem is it only blurs the first image but not the next image.
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
<div id="banner_cycle_wrapper" >
<div id="banner_bg_cycle">
<img alt="" src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
</div>
$('#banner_images').cycle({
fx: 'fade',
timeout: 2000
});
$(".blur").pixastic("blurfast", {amount:0.5});
I think you are missing CLASS to add in that
class="blur"
this should be added to each image you want to have the same effect.
Updated Code:
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img alt="" src="source.png"/>
</div>
<div id="banner_cycle_container">
<img alt="" src="img1.png" class="blur" />
<img alt="" src="img2.png" class="blur" />
</div>
</div>
</div>
I hope this will help :)