How to tell a javascript function what element to manipulate? - javascript

I am so very new to asp.net and javascript, and I am supposed to do the following task in a couple of days. I know I have to learn all the basics, before asking, but really don't know where to get what I need in short time. Thanks a lot in advance!
Here's a number cities, which will be shown on a country map:
Each city has it's own style (since city positions are different), defined in a css.
<div class="node">
<div class="taxonomy">
</div>
<div class="content">
<div id="contact_map" runat="server">
<ul>
<li id="city1" onmouseover= "onmouseoveragent(this)"
onmouseout="onmouseoutagent(this)">
<a href="someAddress"><span class="hideme">Some City Name</span>
</a>
<p class="hideme">Some City Name<strong class="tel">0123456789</strong>
</p>
</li>
<%-- other cities here, with different city name and tel --%>
</ul>
</div>
</div>
</div>
I will probably try to figure out how to create these city items dynamically later.
Below is a hint box, to be shown when mouse is over the city. It has to be repeated for all the cities. (Question1: How can I create these hint boxes dynamically, and somehow fill them with the information associated with the right city? Maybe I have to create the previous list dynamically, too..)
<div id="agentVisit" class="floating-tip-wrapper" style="margin: 0px; padding: 0px; position:
absolute; display:none; opacity: 1;">
<div class="floating-tip" style="margin: 0px;">Some City Name
<strong class="tel">0123456789</strong>
</div>
</div>
And this is tha javascript code for onmouseover and onmouseout of each city:
(Question 2: How can I tell the function which agentVisit to get? )
<script language="javascript" type="text/javascript">
function onmouseoveragent(e) {
var hint = document.getElementById("agentVisit");
console.log(hint);
hint.style.display = 'block';
hint.style.top = Math.max(e.offsetTop - hint.offsetHeight, 0) + "px";
hint.style.left = e.offsetLeft + "px";
};
function onmouseoutagent(e) {
var hint = document.getElementById("agentVisit");
hint.style.display = 'none';
}
</script>
I would appreciate it if you provide an idea (or just a general hint) of how to do it. Or just a link to a quick tutorial. Thanks!

I think you are making this way more complicated than it has to be, because you can leverage data dash (data-) attributes of DOM elements and then use something like jQueryUI Tooltip.

Related

How to make image give her name to text field then edit the name and save it? Plus delete button should remove picture

This one is very tricky and I cant imagine how to solve it... Request was "Double click on picture, then you get picture name in to text field. There you can change name and save it with button. Also there's another button which clicked you delete the picture."
At this moment I dont have much, it's just a guess what it should look like..
function rodytiViduryje(pav){
var paveikslas=document.getElementById("jap");
paveikslas.src=pav.src;
var aprasymas=document.getElementById("apr");
aprasymas.value=pav.title;
lastph=pav;
}
function keistiAprasyma(){
var NA=document.getElementById("apr");
lastph.title=NA.value;
}
function trintiPaveiskla(){
lastph.remove();
}
<div class="ketvirtas">
<!-- THIS PICTURE -->
<img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt=japonija class="b" style="width:780px;height:480px">
</div>
<div class="penktas">
<div class="aprasymas"> <!-- Buttons-->
<label for="tekstas">
<b>Paveikslo aprasymas</b>
</label><br/>
<input type="text" id="apr" />
<button id="saugoti" onclick="keistiAprasyma()">Išsaugoti aprašymą</button><br/>
<br>
<button onclick="trintiPaveiksla()">Trinti iš galerijos</button><br/>
</div>
</div>
Please share your ideas! :)
JS could be something like this (also made small changes to HTML):
document.addEventListener("DOMContentLoaded", function(event) {
let img = document.querySelector('#jap');
let descriptionInput = document.querySelector('#apr');
let saveButton = document.querySelector('#saugoti');
let deleteButton = document.querySelector('#trinti');
img.addEventListener('dblclick', function (e){
console.log
descriptionInput.value = this.alt;
});
saveButton.addEventListener('click', function(){
img.alt = descriptionInput.value;
});
deleteButton.addEventListener('click', function(){
img.remove();
});
});
<div class="ketvirtas">
<!-- THIS PICTURE -->
<img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt="japonija" class="b" style="width:780px;height:480px" />
</div>
<div class="penktas">
<div class="aprasymas"> <!-- Buttons-->
<label for="tekstas">
<b>Paveikslo aprasymas</b>
</label><br/>
<input type="text" id="apr" />
<button id="saugoti">Išsaugoti aprašymą</button><br/>
<br>
<button id="trinti">Trinti iš galerijos</button><br/>
</div>
</div>
My advice for future endeavours: scale your tasks to smaller ones. This will give you more valid results. Also you'll be able to learn while combining those multiple solutions to the one you need. I.e., your searches for this task could be:
Javascript double click event
Javascript get images' alt value
Javascript set images' alt value
Javascript remove DOM element

How to Write a Function that Lists Products in a Table Side-by-Side

I have a script that allows users on my e-commerce site to select 3 products and it highlights the products as they select.
How can I grab the $pro_image, title, desc, etc. of the 3 products selected and put them into a table for side-by-side view?
I am assuming we will somehow need to check for the $pro_id that is selected to identify each product separately?
<div class="col-md-10">
<h4>Not sure which product to choose? <br> Select up to 3 and compare side-by-side.</h4>
<div class="col-md-2">
<button type="compare" class="btn btn-success" name="submit-compare">Compare</button>
</div>
<div class="col-md-12">
<?php getpcatpro();
$get_products = "SELECT * FROM products ORDER BY RAND() LIMIT 0,9";
$run_products = mysqli_query($con,$get_products);
while($row_products=mysqli_fetch_array($run_products)){
$pro_id = $row_products['product_id'];
$pro_title = $row_products['product_title'];
$pro_img1 = $row_products['product_img1'];
$pro_link = $row_products['product_link'];
echo "
<div class='col-md-4 col-sm-6'>
<div class='product' onclick='highlight(this)'>
<center>
<img class='img-responsive' src='admin_area/product_images/$pro_img1'>
</center>
<div class='text'>
<center>
<a href='$pro_link'> $pro_title </a>
</center>
</div>
</div>
</div> ";
}
?>
<script>
var selected_items = 0;
function highlight(target) {
if(target.style.border == ""){
if(selected_items < 3){
target.style.border = "1px solid red";
selected_items += 1;
}
} else{
target.style.border = "";
selected_items -= 1;
}
}
</script>
</div>
</div>
Firstly, there's no button type called 'compare', please stick to standards, you shouldn't put random things into these attributes, you can create your own if need be (which I do not think you need to). See here for the three types you are allowed: https://www.w3schools.com/tags/att_button_type.asp (you should just use 'button')
Second, do not add styles through JS, you will cause an entire repaint every time you change a pixel. Instead, toggle class names on the class attribute of an element, let CSS do the work of styling, and JS do the work of interaction.
Thirdly, move all 'PHP' to the top of your script (such as defining your SQL statement and fetching the result of it) rather than having these things interspersed within HTML (just use PHP later in the document to build HTML from the PHP variables at the top of the script), such as looping through your result set to build out the HTML, not to perform important tasks such fetching the data itself, this will help you track whats doing what where so you don't tie yourself up in IF statements etc.
OK, Create a function, bound to your compare button, that toggles the state of an element. Instead of 'highlighting' using styles, toggle a class 'compare' on the product parent container:
<style>
.product.compare{
border: 1px solid red;
}
</style>
<script>
$('.btn.compare').click(function(){
$(this).closest('.product').toggleClass('compare');
});
</script>
<div class='products'>
<div class='product' data-id='1'>
<h2>A Product</h2>
<button class='btn compare'>compare</button>
</div>
<div class='product' data-id='2'>
<h2>Another Product</h2>
<button class='btn compare'>compare</button>
</div>
</div>
This will basically, when the button is clicked, find the parent element with class '.product' then toggle the class '.compare' on it, so you should have .product.compare
You'll need to design your table to have fixed rows with class names, like so:
<table class='comparison'>
<thead>
<tr class='product-title'></tr>
</thead>
<tbody>
<tr class='product-price'></tr>
</tbody>
</table>
Once you have products with a toggled state (a class has been added which both highlights the row with CSS visibly, but also flags it for comparison to jQuery, create a new button and method for it to call to build the comparison table
<button class='btn goCompare'>Go Compare</button>
$(function(){
$(".btn.goCompare").on('click', function(e){
e.preventDefault();
buildComparisonTable();
});
});
function buildComparisonTable(){
var comparisonTableBody = $('table.comparison tbody');
var comparisonTableBodyProductTitleCol = $('table.comparison thead tr.product-title');
var comparisonTableBodyProductPriceCol = $('table.comparison tbody tr.product-price');
comparisonTableBody.find('.product-col').remove();
$('.product.compare').each(function(){
var id = $(this).attr('data-id');
var title = $(this).attr('data-title');
var price = $(this).attr('data-price');
comparisonTableBodyProductTitleCol.append('<th class="product-col">'+title+'</th>');
comparisonTableBodyProductPriceCol.append('<td class="product-col">'+price+'</td>');
});
}
The choice is yours, but think about how you can cleverly and correctly mark up your pages to be easily read by your scripts. You can either stuff all of the product data into attributes on a parent element:
<div class='product' data-id='1' data-title='A Product' data-price='$10.00' data-primary-category='Homeware'>
<h2>A Product</h2>
<button class='btn compare'>compare</button>
</div>
Or you can add a class to each element that has the data you intend to gleam:
<div class='product' data-id='1'>
<h2 class='product-title'>A Product</h2>
<span class='product-price'>$10.00</span>
<span class='product-category'>Homeware</span>
<img class='product-img' src='/images/product-1.jpg' />
</div>
Now you can target what you want easily and get information from it using proper class names, a considered layout, correct use of technologies and a simple approach. This code-pen illustrates: https://codepen.io/anon/pen/voBKgV

use html5 output tag to display javascript variables?

Sorry if this is a silly question, but I've been trying to use AJAX to display my javascript variables in 'real time' with little luck. I'm definitely a beginner though so this could be the problem haha- When I see the AJAX code, it always seems to require an additional url that it refreshes, but I just want to refresh the javascript variables on click.
http://jsfiddle.net/bagelpirate/m9Pm2/
<script>
var one = 0;
var two = 0;
var three = 0;
</script>
<body>
<div id="div_1">
One: <script>document.write(one)</script> |
Two: <script>document.write(two)</script> |
Three: <script>document.write(three)</script>
</div>
<div id="div_2">
<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" onclick="one++;" />
<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" onclick="two++;" />
<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" onclick="three++;" />
</div>
</body>
As you can see in the above code, when a user clicks one of the images, I want to increment the count and display it at the top of the page. I found the HTML5 output tag, and was wondering if it's possible to use this to display the javascript variable in real time? Everything I've read seems to imply it can't be done because the output tag only works on forms? Anyway, I figured it couldn't hurt to ask!
Thanks for your time!
You shouldn't use document.write to write to the DOM after it's finished loading. You have tagged your question with jQuery, so I'll assume you can use that to update things. Instead, update the DOM from within your script block. Here is an example that might help you get started.
http://jsfiddle.net/prxBb/
<script type="text/javascript">
$(function() {
var one = 0;
var two = 0;
var three = 0;
$('img#mine').click(function() {
one++;
$('span#one').html(one);
});
$('img#forest').click(function() {
two++;
$('span#two').html(two);
});
$('img#farm').click(function() {
three++;
$('span#three').html(three);
});
});
</script>
<body>
<div id="div_1">
One: <span id="one"></span> |
Two: <span id="two"></span> |
Three: <span id="three"></span>
</div>
<div id="div_2">
<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" />
<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" />
<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" />
</div>
</body>
Maybe you should try putting all your variables inside a named object, iterating through it at predefined interval and displaying the values.
var varContainer = {
one:0,
two:0,
three:0
};
jQuery("#div_2 img").on('click',function(){
jQuery.each(varContainer,function(key,value){
//Add key + value to the DOM
if(jQuery("."+key+value).length<1)
jQuery("#div_2").append("<div class='"+key+value+"'></div>");
var newHtmlVal= "<p><span>Var name: "+key+"</span><br><span>Value: "+value+"</span>";
jQuery("."+key+value).html();
});
});
HTML
<div id="div_2">
</div>
Of course the script could be upgraded to look through each variable recursivley in case of nested objects/arrays...
Hope this helps!

Dynamic image placement help - CSS / javascript / jquery?

Hi I'm fairly new to web development and am stuck at the very first project I have set myself.
I'm trying to create a team selection page where different team formations can be selected and the images will be dynamically ordered according to the selected formation.
I don't know if this can be achieved using CSS only, or whether I have to combine it with javascript or jquery (I'm trying to learn all 3 so it's a steep learning curve).
I think I can create a list in the html ul li, and then dynamically change the class of each li depending on the selected formation.
e.g. for soccer, formation 442 would have:
GK
DEF DEF DEF DEF
MID MID MID MID
STR STR
but if the formation was changed to 541 then the images would change to show
GK
DEF DEF DEF DEF DEF
MID MID MID MID
STR
Could anybody provide me with hints as to what possible solutions there are to this issue and I will read up further to try and understand.
e.g. do I need to create a javascript function for each formation type, give an id to each li element and set the CSS for each element depending on the selected formation
e.g do I use jquery to add CSS class to each li element depending on selected formation
Here's a piece of code which may help you with what you need.
<div>
<ul id="ulGoalkeepers"><li>GK</li></ul>
<hr />
<ul id="ulDefenders"></ul>
<hr />
<ul id="ulMidfielders"></ul>
<hr />
<ul id="ulStrikers"></ul>
</div>
<select id="ddlFormation">
<option></option>
<option value="4-4-2">4-4-2</option>
<option value="4-5-1">4-5-1</option>
</select>
<script type="text/javascript" language="javascript">
function formationChanged(){
var formation = $("#ddlFormation").val();
if (formation != undefined && formation != '') {
$("#ulDefenders").empty();
$("#ulMidfielders").empty();
$("#ulStrikers").empty();
var parts = formation.split('-');
var defenders = parts[0];
var midfielders = parts[1];
var strikers = parts[2];
for (var i = 0; i < defenders; i++) {
$("#ulDefenders").append('<li>DEF</li>');
}
for (var i = 0; i < midfielders; i++) {
$("#ulMidfielders").append('<li>MID</li>');
}
for (var i = 0; i < strikers; i++) {
$("#ulStrikers").append('<li>STR</li>');
}
}
}
$(document).ready(function () {
$("#ddlFormation").bind("change", formationChanged);
});
</script>
EDIT:
I don't like the idea with CSS because you lose the structure of html elements. Defenders, midfielders are all will be in the same list and that is not very good.
On the other hand there might be some ideas how to implement that and a lot depends on what you really need. For example:
CSS:
.team div
{
float: left;
width: 50px;
}
.team div.first
{
clear: both;
}
HTML:
<div class="team">
<div class="goalkeeper">GK</div>
<div class="defender first">DEF</div>
<div class="defender">DEF</div>
<div class="defender">DEF</div>
<div class="defender">DEF</div>
<div class="midfielder first">MID</div>
<div class="midfielder">MID</div>
<div class="midfielder">MID</div>
<div class="midfielder">MID</div>
<div class="striker first">STR</div>
<div class="striker">STR</div>
</div>
But that does not work in IE7. You may try to investigate this a bit more.
Another idea is to use css absolute positioning. For example you add appropriate classes via jquery, so one item would have for example class="midfielder second" and you interprete this in css like "top" css style from "midfielder" class and "left" css style from "second" class.

Javascript method for rotating images on a mouse click

I have a PHP-page with a series of pie chart images (I use Google Chart Tools) all of the same 700x280 size:
<html>
<head>
<script>
var chart1 ='http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd';
var chart2 ='http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd&chbh=15,4,15';
var chart3 ='http://chart.apis.google.com/chart?cht=bvg&chs=700x280&chd=s:hello,world&chco=4d89f9,c6d9fd&chbh=15,4,15';
XXX please suggest a function here XXX
</script>
</head>
<body>
<img src="logo.png" width=700 height=280>
Chart 1:
<img src="http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=January|February|March|April" width=700 height=280>
Chart 2:
<img src="http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chdl=May|Juny|July|August" width=700 height=280>
Chart 3:
<img src="http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=September|October|November|December" width=700 height=280>
</body>
</html>
I would like to offer users the possibility to view the same data as a bar chart - when they click on a chart.
Last time I've used Javascript it had been for MSIE4 and Netscape. Please give me some pointers for my little function.
I.e. I don't need any help with constructing Google Charts, I just need little help on the Javascript function to rotate images in-place, on a mouse click, but with the following requirements:
1) Users with Javascript disabled should be still able to see the pie charts. Also it would be nice to enable them to see the bar charts too (i.e. by putting bar charts behind an HTML-link or maybe you hide the bar charts with Javascript and for users with Javascript disabled they are not hidden - which is okay).
2) Please 1 universal function for all charts - i.e. I don't want to have 10 functions for 10 charts.
Thank you very much! Alex
Realizing it's ages since I wrote any javascript without a framework (you forgot to mention if you were using one.. You probably should!). Anyway, here's my stab at it. People without Javascript can hover the pie charts to see the bar charts, while people with Javascript can click on them.
<style type="text/css">
img.primary { display: inline; }
img.secondary { display: none; }
div.foo:hover img.secondary { display: inline; }
div.foo:hover img.primary { display: none; }
</style>
<script type="text/javascript">
function swapImages(container)
{
for(var child in container.childNodes)
{
child = container.childNodes[child];
if(child.nodeName == "IMG")
child.className = child.className == "primary" ?
"secondary" : "primary";
}
}
window.onload = function() {
// Remove the foo class when the page loads, to disable hover
var chartArea = document.getElementById("chartArea");
for(var child in chartArea.childNodes)
{
child = chartArea.childNodes[child];
if(child.nodeName == "DIV" && child.className == "foo")
child.className = "";
}
}
</script>
<div id="chartArea">
<div class="foo" onclick="swapImages(this);">
<img class="primary" src="http://somewhere/piechart1.png" />
<img class="secondary" src="http://somewhere/barchart1.png" />
</div>
<div class="foo" onclick="swapImages(this);">
<img class="primary" ... />
<img class="secondary" ... />
</div>
<div class="foo" ....>
</div>
If you can live with the image changing on hover instead of on click, you may not need any JavaScript...
<style type="text/css">
/*<[CDATA[*/
a.chart,a.chart:hover{
cursor:default;
display:block;
background-repeat:no-repeat;
width:700px;
height:280px;
}
#chart1{background-image:url(http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=January|February|March|April);}
#chart1:hover{background-image:url(http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd);}
#chart2{background-image:url(http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chdl=May|Juny|July|August);}
#chart2:hover{background-image:url(http://chart.apis.google.com/chart?cht=bhg&chs=700x280&chd=s:el,or&chco=4d89f9,c6d9fd&chbh=15,4,15);}
#chart3{background-image:url(http://chart.apis.google.com/chart?cht=p&chd=s:Uf9a&chs=700x280&chl=September|October|November|December);}
#chart3:hover{background-image:url(http://chart.apis.google.com/chart?cht=bvg&chs=700x280&chd=s:hello,world&chco=4d89f9,c6d9fd&chbh=15,4,15);}
/*]]>*/
</style>
<a id="chart1" class="chart" href="javascript://"><br/></a>
<a id="chart2" class="chart" href="javascript://"><br/></a>
<a id="chart3" class="chart" href="javascript://"><br/></a>

Categories

Resources