We Keep Coding

having trouble getting a moving image disappear on click

I really don't know what I'm doing. I'm trying to learn JS and it's been touch and go from the start. I would like to make a floating image disappear once it is clicked. I don't think my code is correct. Any comments or words of advise would be helpful.
Thanks in advance,
Mario
This is what I am using to make the image to disappear:
function mousePressed(){
if(dist(pagex, pageY, chip.xx, chip.yy) < chip/1){
chip=false;
}
}

Preferably you should use onclick on the HTML element as it will run your code when clicking directly on the element. No need to check coordinates manually.
The image can be hidden by setting the CSS property display to none.
See this example:
function hideMe(element){
element.style.display = 'none';
}
<img src="https://placekitten.com/408/287" onclick="hideMe(this);">

Retrieve proper path for dynamic image src assignment

I understand that there are similar questions out there, but none of them seem to work properly for me. I have a slider and an image. When I change the value of the slider, I want the image to change as well. Here are the relevant pieces of javascript:
var imageArray = ['face0.png',
'face1.png',
'face1.png',
'face2.png',
'face2.png',
'face3.png',
'face3.png',
'face4.png',
'face4.png',
'face5.png',
'face5.png'];
function sliderValueChange(value) {
//$('#painScaleImage').attr('src', '~/Content/' + imageArray[value]); ***gets wrong path
//$('#painScaleImage').src('~/Content/' + imageArray[value]); ***jQuery has no method called .src()
//document.getElementById('painScaleImage').src = '~/Content/' + imageArray[value]; ***gets wrong path
//these are commented out because they all failed to work
}
My images are located in my project under Content/face0.png, Content/face1.png, etc. My Views are located in Views/Home/view.cshtml. The problem is that when I called the $(...).attr() and document.getElementById(...).src functions, the browser looked for the images under /Home/~/Content/face0.png instead of looking under Content/face0.png. The reason I assumed I could use ~/Content/face0.png is because if I were to declare the images in html, this would get the image in the right place <img src="~/Content/face0.png" />. How can I properly achieve what I am trying to do? What is going wrong?

Got it, root relative paths were the correct answer for my solution.
(start the path with a /).

Reload Div Section Only

I don't know if what I am trying to do is possible so I will explain the whole scenario and what I am attempting to do that way if there is a better way you bright people can let me know!
Here is the scenario, I have a view and a PartialView. In the PartialView I have a dropdown list that gets populated via javascript from in the View. This works fine, in the PartialView I have a div that calls a Controller to return results based on a value in the Model passed to it. What I need are the results to be based on the value from the Model AND the dropdown list. Here is the code that works just based on the model value and a hardcoded loc which is what I want to get from the dropdown.
<div id="catalogue-view-action-view-ct" class="async-partial" data-url='#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatalogueItemID?loc=6&AsyncUpdateID=catalogue-view'>
#if (noJs)
{
<span>
#{ Html.RenderAction("ItemsActionViewPartial", "Catalogue_Items", new { id = Model.CatalogueItemID, location = 6, AsyncUpdateID = "catalogue-view-action-view-ct" }); }
</span>
}
else
{
<img src="#Url.Content("~/assets/images/busy.gif")" /><span> Loading...</span>
}
</div>
This div in the PartialView works great, in the View I have been able to set the data-url attribute no problem with javascript but the page is already loaded so it doesn't update. Is there a way to "refresh" or "reload" just a div not the whole PartialView? If I do the whole PartialView I am just back in the same situation with the html being loaded before the javascript sets the data-url attribute. Here is the javascript in the view:
var myDiv = document.getElementById('catalogue-view-action-view-ct');
url = '~/Catalogue_Items/ItemsActionViewPartial/20144?loc=' + $('#LocationID').val() + '&AsyncUpdateID=catalogue-view-action-view-ct';
myDiv.setAttribute('data-url', url);
$('#catalogue-view-action-view-ct').load(url);
Any help would be greatly appreciated.
UPDATE:
When using a relative path as I do above the data-url gets set properly but the load path is incorrect because it is appended. This is what happens:
data-url="~/Catalogue_Items/ItemsActionViewPartial/20144?loc=40&AsyncUpdateID=catalogue-view-action-view-ct"
This is perfect, exactly what I need, but the path loaded is:
http://www.example.com/catalogue-items/20144/myItem~/Catalogue_Items/ItemsActionViewPartial/20144?loc=40&AsyncUpdateID=catalogue-view-action-view-ct
The relative path get added to the end of my current location, I can fix this except I need to remove the "/myItem" portion as that is a parameter for the view that I don't want in the url. When I use an absolute path I get a cross-origin error. Any suggestions?

With the help of a few comments I was able to find a solution for my issue!
With using $('#catalogue-view-action-view-ct').load(url); there was actually no need to set the data-url.
But in order to have the relative path work properly I needed to surround it with url.content like so:
$('#catalogue-view-action-view-ct').load('#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatalogueItemID?loc=' + $('#LocationID').val() + '&AsyncUpdateID=catalogue-view-action-view-ct');
loading this value produced the desired results. Thanks #Lal for leading me in the right direction!

get a dynamic value for css

I'm new here so i'll ask. I have a dynamic slider that gets the height dynamically. So I need to get this dynamic height and pass the value to the top css.
I added this function in the function.js file
$('.navbar-inverse').css("top", 922);
and it gets the value, but I need this value to be dynamic and not inserted manually.
The height value comes from a class name fs-stretcher
Any help would be great. tks

Try
$('.navbar-inverse').css("top", $('.fs-stretcher').height())

This needs to be part of an event handler if you want the dynamic value. You call it a slider but I'm not sure what exactly the event is so we'll go with...scrolling down the page (just change the word scroll to whatever you use).
$('.navbar-inverse').on('scroll', function() {
$(this).css('top', $('.fs-stretcher').height());
});

how to change the path of the images depending of the the button of the menu that I click

I have a menu in which each section displays a different gallery image. Therefore I have to know what button of the menu I clicked, since depending of the button I have to change the images path.
<div id="tabcontainer">
<ul id="tabnav">
<li>Monuments</li>
<li>Bridges</li>
<li>Gardens</li>
For example, if I click on Monuments I have to load the monuments image and if I click on Gardens the gardens image.
I always use the $path variable and I would like to assign it a different path each time.
EDIT:
I have 3 path variables, $path_monumets, $path_bridges and $path_gardens but in the end I use the variable $path, only $path. Depending of the button of the menu that I click I want that the value of $path change to $path=$path_brige or, $path=$path_garden, etc.
Some one could help me? Maybe my question is simply but I couldn't find how to do it on the internet.
THANKS
EDIT 2
I wrote the funcion setPath (I know that return the same value but I wanted to use a function ):
<?php
function setPath($new_path)
{
return new_path;
}
?>
and I changed the menu:
<li>Monuments</li>
<li>Bridges</li>
<li>Gardens</li>
But even so, the variable path doesn't change her value. Could someone help me?

You can also just move the event to your javascript so that you wont have to modify the mark up at all.
...
myTabs[i].addEventListener( 'click', function(e) {
...
See a code example in this JSFiddle.

What you can do is attach the paths to the respectively link:
<div id="tabcontainer">
<ul id="tabnav">
<li>Monuments</li>
<li>Bridges</li>
<li>Gardens</li>
So you'll get the path for each link on click. Is that what you want?