We Keep Coding

In ASP.net, what kind of IF statement could I use to hide a div if the image inside it matches the current page URL?

This is within Sitefinity if that matters, and I am really new at ASP.NET and C#.
I have an image-based navigation element at the bottom of a page that links to different articles using the same template. There are 5 articles, and I would like the link to the active page/article to be hidden so there is a grid of 4 image links.
Here's a screenshot:
https://i.imgur.com/PG2Sfpo.png
Here is the code behind it:
#{
string navTitle = string.Empty;
string url = string.Empty;
if (Model.CurrentSiteMapNode != null && Model.CurrentSiteMapNode.ParentNode != null)
{
if (Model.CurrentSiteMapNode.Title == "Home")
{
navTitle = Model.CurrentSiteMapNode.ParentNode.Title;
}
else
{
navTitle = Model.CurrentSiteMapNode.Title;
}
url = Model.CurrentSiteMapNode.ParentNode.Url;
}
}
<div class="foundation-stories-container">
#foreach (var node in Model.Nodes)
{
#RenderRootLevelNode(node);
}
</div>
#*Here is specified the rendering for the root level*#
#helper RenderRootLevelNode(NodeViewModel node)
{
string[] thisPage = (node.Url).Split('/');
string thisImage = thisPage[4] + ".jpg";
<a href="#node.Url" target="#node.LinkTarget">
<div class="foundation-story-block">
<div class="hovereffect">
<img src="[OUR WEBSITE URL]/stories/#thisImage" class="img-fluid">
<div class="overlay">
<h2>#node.Title</h2>
</div>
</div>
</div>
</a>
}
So we're already getting the page URL and image file name
string[] thisPage = (node.Url).Split('/');
string thisImage = thisPage[4] + ".jpg";
Is this as easy as doing the following?
if (thisImage = thisPage)
{
foundation-story-block.AddClassToHtmlControl("hide")
}
Seems easy enough, but I don't know where to start.
I'm better at Javascript, so I do have a JS solution in place for this already, but I'd really like to find a cleaner way to do it.
<script type="text/javascript">
$(document).ready(function() {
var active = window.location.pathname.split("/").pop()
var name = active;
name = name.replace(/-/g, ' ');
jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
return function( elem ) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >=
0;
};
});
$("h2:Contains('" + name + "')").closest(".foundation-story-block").addClass("hide");
});
</script>
This exists on the main template page.
Gets the last part of the URL
Sets that as a variable called "name"
Changes the dash to a space if there is one (most of the pages are associated with names so it's like /first-last)
Then it goes and looks at the which is where the title of the page lives, and if it equals the "name" variable, the ".hide" class is added to the block.
Thanks for any help anyone can provide.

You could bind a click event to your elements with the foundation-story-block class. The reason I use .on instead of .click is because when using UpdatePanels the click event won't fire after an UpdatePanel has it's update event triggered - you might encounter a similar problem with your dynamic binding so I used .on to avoid this.
$(".foundation-story-block").on("click", function() {
// Remove the "hide" class from any elements that have it applied
$.each($(".foundation-story-block.hide"), function(index, value) {
// Remove the class using the "this" context from the anonymous function
$(this).removeClass("hide");
});
// Add the "hide" class to the element that was clicked
$(this).addClass("hide");
});
I haven't run this though an IDE so it might not be 100% correct but it will put you on the correct path.

It is possible, yes. Here is how:
...
#{
var hiddenClass = thisImage == thisPage ? "hide" : string.Empty;
}
<div class="foundation-story-block #hiddenClass">
<div class="hovereffect">
<img src="[OUR WEBSITE URL]/stories/#thisImage" class="img-fluid">
<div class="overlay">
<h2>#node.Title</h2>
</div>
</div>
</div>

Handle Youtube Embed restriction

I'm actually developping a JARVIS assistant
It will have a lot of module But i start with what was supposed an easy one.
the Youtube One. So my mainwindow who are fullscreen or hidden has a WebBrowser
private static string GetYouTubeVideoPlayerHTML(string videoCode)
{
var sb = new StringBuilder();
const string YOUTUBE_URL = #"http://www.youtube.com/embed/";
sb.Append("<html>");
sb.Append(" <head>");
sb.Append(" <meta name=\"viewport\" content=\"width=device-width; height=device-height;\">");
sb.Append(" </head>");
sb.Append(" <body marginheight=\"0\" marginwidth=\"0\" leftmargin=\"0\" topmargin=\"0\" style=\"overflow-y: hidden\">");
sb.Append($" <iframe width=\"100%\" height=\"100%\" src =\"{YOUTUBE_URL}{videoCode}?autoplay=1&showinfo=0&controls=0\" frameborder = \"0\" allowfullscreen>");
sb.Append(" </body>");
sb.Append("</html>");
return sb.ToString();
}
This return the string i use with WebBrowser.Navigate()
It work well but if the video has embeded restriction like VEVO i can't see it
https://www.youtube.com/embed/wfN4PVaOU5Q
Exemple here
One thing tell me its possible because in this site
http://codepen.io/Jebik/pen/ZLZQwX
The embeded work like a charm....
So it's probably something that i don't get about this restriction.
Any idéa and solution is welcomming.
But i would rather have a legit solution like "man you must register your domain and ask the page in https" than "you can hack this security by this method"

I found a way i don't know why its works
I use a server i have to upload a webpage
<!DOCTYPE html>
<html>
<body>
<div id="player"></div>
<script>
var player;
var body = document.body;
var html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
var width = Math.max( body.scrollWidth, body.offsetWidth,
html.clientWidth, html.scrollWidth, html.offsetWidth );
window.onresize = resize;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady()
{
player = new YT.Player('player', {
height: height,
width: width,
playerVars: { 'autoplay': 1, 'controls': 0, 'showinfo': 0, 'enablejsapi':1, 'iv_load_policy':3, 'modestbranding':1, 'showinfo':0},
videoId: '<?php echo $_GET["v"]; ?>',
events: {
'onReady': onPlayerReady
}
});
}
function resize()
{
height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
width = Math.max( body.scrollWidth, body.offsetWidth,
html.clientWidth, html.scrollWidth, html.offsetWidth );
if(player != null)
{
player.setSize(width, height);
}
}
function onPlayerReady(event) {
event.target.playVideo();
}
function playVideo()
{
player.playVideo();
}
function pauseVideo()
{
player.pauseVideo();
}
</script>
</body>
</html>
The web page Must Be acces from https
I don't exactly know why
Maybe youtube use the certificat to know the real location of web site (checking where it is registred instead of the ip)
And after taht i change my WebBrowser.NavigateToString by a WebBrowser.Navigate($"https://domain.fr/youtube.php?v={VideoCode}");
In this way i have a youtube player in full screen in my WPF window and i can read most of the youtube video like VEVO limited one.
This is resolved but if anyone know why i'm curious to know

Loading Image to Image Control using JavaScript

Now I need to change the displaying image to image control. Help me?
var imlocation1 = "Bhopal/";
var currentdate1 = 0;
var image_number1 = 0;
function ImageArray1(n) {
this.length = n;
for (var i = 1; i <= n; i++) {
this[i] = ' '
}
}
image1 = new ImageArray1(3)
image1[0] = '2.jpg'
image1[1] = '4.jpg'
image1[2] = '1.jpg'
var rand1 = 100/ image1.length
function randomimage1() {
currentdate1 = new Date()
image_number1 = currentdate1.getSeconds()
image_number1 = Math.floor(image_number1 / rand1)
return (image1[image_number1])
}
document.write("<img src='" + imlocation1 + randomimage1() + "'>");

"Img" element have "src" attribute that points to the image on a server. So you need to find the "img" element, and if found set the src attribute.
Basic search for whole question http://www.bing.com/search?q=I+Load+an+Image+to+an+Image+Control+using+JavaScript&src=IE-SearchBox&FORM=IE8SRC give following link: http://www.javascriptexamples.org/2011/01/18/how-to-dynamically-load-an-image-using-javascript/
Sample from the link above:
<div id="imageContainer"></div>
var img = document.createElement("img");
img.onload = function(e) {
var container = document.getElementById("imageContainer");
container.appendChild(e.target);
}
img.setAttribute("src","images/puppy.jpg");

$("#YourImageId").attr("src", "ImagePath")
If you use webforms - probably
$("#<%=YourImageServerId.ClientID%>")
If it doesn't help - post some code or some more info to your question

The idea of a control only really exists on the server side. Javascript in this case only runs on the client side, on the browser. Once the server renders the image control, you end up with an IMG tag on the client side. If you tag it with an ID or a CSS class, you can find it with Javascript (or even better a library like JQuery) and load images onto it with that.

how to add locations(markers) on a google map from database..?

I am creating a google map in order to display store locations of a brand across india...
i have stored the complete address, with latitude & longitude in my SQL server database...
here I am able to get the address from database and display in my web page, but i am stuck with, mapping the address on google map...
here i have kept a text box so that the user enters his state/city/any location name, and clicks search button, then i have to mark the corresponding store location on the map by a marker..
here's my code for googgle map...
<script type="text/javascript">
var infowindow = null;
function initialize() {
//var centerMap = new google.maps.LatLng(13.040547,80.230805);
var centerMap = new google.maps.LatLng(12.264864, 77.937012);
var myOptions = {
zoom: 7,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({ });
}
//var sites = '<%=TextBox1.Text%>'
//alert(sites);
//[
//// ['Ambattur', 13.119438,80.148182, 4, 'Ambattur, Chennai, Tamil Nadu, India, 600031'],['Avadi', 13.124453,80.101662, 1, 'Avadi, Tamil Nadu, India, 600017'], ['Jayanagar', 12.928945,77.590599, 1, 'Jayanagar, Bangalore, Karnataka, India, 560041'],['Indira Nagar', 12.973697,77.641325, 1, 'Indira Nagar, Bangalore, Karnataka, India, 560038'],['TamilNadu', 11.415418,78.662109, 1, 'TamilNadu, India, 600017']
//];
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
icon: new google.maps.MarkerImage(
'Images/R.png ',
null, null, new google.maps.Point(0, 42)),
title: sites[0],
zIndex: sites[3],
html: sites[4]
});
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
here, i have sites variable, so that i can map my locations on a map,
but here i need to map them from database...
any help will be appreciated...
thanks
shameer ali shaik

At a first glance, your code seems alright. but here is my Code which works perfectly fine for me may be it will helpful to you.
myLatlng = new google.maps.LatLng(32.54681317351514, 15.1171875);
map = new google.maps.Map(document.getElementById("gmap"), {mapTypeId: google.maps.MapTypeId.ROADMAP,zoom:2,center:myLatlng});
/* loop which plot the markers on the map*/
// record[i] holds lat&lang in this format'32.54681317351514, 15.1171875'
var points=record[i].geo_location.split(',');
marker = new google.maps.Marker({
position: new google.maps.LatLng(points[0],points[1]),
draggable: false,
map: map
});

Guruparan Giritharan..
As i have told in my question, I want to locate stores across india.. & the sore details will be stored in database..
Now, i am able to get the store details & mark their location on map by your code..
earlier it is working fine for pincode, in the sense if you provide pincode in your searchbox, it will retrieve the corresponding
store details..
Now, as per my code, in my reply for your blog post, i am able to enter only string values in the textbox., here i need to implement it for numeric values(pincode) also,
here's my code of update panel and timer click event..
protected void UpdatePanel1_Load(object sender, EventArgs e)
{
//Linq is used to load the table to the code
DataClassesDataContext data = new DataClassesDataContext();
//Select all from the table
//List<addressmap> lst = (from u in data.addressmaps select u).ToList();
List<addressmap> lst = (from u in data.addressmaps where u.StoreLocation == TxtSearch.Text || u.StoreCity == TxtSearch.Text || u.StoreState == TxtSearch.Text || u.StoreCountry == TxtSearch.Text select u).ToList();
//add the table contents to the javascript array so that new locations will be loaded
foreach (addressmap item in lst)
{
ScriptManager.RegisterArrayDeclaration(UpdatePanel1, "infoarray", "'" + item.StoreAddress.ToString() + "'");
ScriptManager.RegisterArrayDeclaration(UpdatePanel1, "lonarray", item.StoreLongitude.ToString());
ScriptManager.RegisterArrayDeclaration(UpdatePanel1, "latarray", item.StoreLatitude.ToString());
ScriptManager.RegisterArrayDeclaration(UpdatePanel1, "bounce", item.StoreBounce.ToString());
}
}
protected void Timer1_Tick(object sender, EventArgs e)
{
//update the update panel every 10 seconds
UpdatePanel1.Update();
}
here in the select statement, i need for pincode also..
any help will be thankful..

C# Google Earth Error

A friend of mine has embedded a google earth plugin into a C# user control. All works fine but when you close the window we recieve and "Unspecified Error" with the option to continue running the scripts or not. From our tracking it down it appears this is being cause by a script that google is dropping onto the page. Any ideas?

Here is an example, by me, of c#/Google Earth API integration that covers the problem you are having (see the comments)
http://fraserchapman.blogspot.com/2008/08/google-earth-plug-in-and-c.html
Also, here is another of my projects that uses COM Google Earth Plugin Type Library (plugin_ax.dll) converted into the equivalent definitions in a common language run time assembly. It may be of some use. http://fraserchapman.blogspot.com/2008/12/google-earth-plugin-control-library.html

We have now tried this in both IE and FF. Works fine. Any ideas why the error only comes up on close? can we somehow disable it? here is our code.
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<html>
<head>
<script src="http://www.google.com/jsapi?key=ABQIAAAAzghEPRV_D0MDzTELJ4nkXBT2AlVLQD8Rz4_aVbiXesLoyhRIMBRo399nnxv9aY-fqnkVGgTgR-pTsg">
</script>
<script>
google.load("earth", "1");
var ge = null;
var placemark;
function init(){
google.earth.createInstance("map3d", initCallback, failureCallback);
}
function initCallback(object){
ge = object;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, false);
placemark = ge.createPlacemark('');
placemark.setName("Current Position");
// Create style map for placemark
var normal = ge.createIcon('');
normal.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');
var iconNormal = ge.createStyle('');
iconNormal.getIconStyle().setIcon(normal);
var highlight = ge.createIcon('');
highlight.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');
var iconHighlight = ge.createStyle('');
iconHighlight.getIconStyle().setIcon(highlight);
var styleMap = ge.createStyleMap('');
styleMap.setNormalStyle(iconNormal);
styleMap.setHighlightStyle(iconHighlight);
placemark.setStyleSelector(styleMap);
var options = ge.getOptions();
options.setStatusBarVisibility(true);
options.setScaleLegendVisibility(true);
}
function failureCallback(object){
// Gracefully handle failure.
alert("Error");
}
function changeViewAngle(angle){
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_ABSOLUTE);
lookAt.setTilt(angle);
ge.getView().setAbstractView(lookAt);
}
function ShowMarker(){
ge.getFeatures().appendChild(placemark);
}
function MoveMarker(lon, lat){
// Create point
var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
var point = ge.createPoint('');
point.setLatitude(lat);
point.setLongitude(lon);
placemark.setGeometry(point);
}
function HideMarker(){
ge.getFeatures().removeChild(placemark);
}
function SetPosition(lon, lat, heading){
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
lookAt.setLatitude(lat);
lookAt.setLongitude(lon);
lookAt.setHeading(heading);
ge.getView().setAbstractView(lookAt);
}
function SetAltitude(alt){
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
lookAt.set(lookAt.getLatitude(), lookAt.getLongitude(), 0, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, lookAt.getTilt(), alt);
ge.getView().setAbstractView(lookAt);
}
function ResizeMap(w, h){
var map = document.getElementById('map3d_container');
map.style.height = h;
map.style.width = w;
}
function AddKML(kml){
var parseKML = ge.parseKml(kml);
ge.getFeatures().appendChild(parseKML);
return ge.getFeatures().getLastChild().getName();
}
function RemoveKML(kmlName){
if (ge.getFeatures().hasChildNodes()) {
var nodes = ge.getFeatures().getChildNodes();
for (var i = 0; i < nodes.getLength(); i++) {
var child = nodes.item(i);
if (child.getName() == kmlName) {
ge.getFeatures().removeChild(child);
}
}
}
}
function OptionsChanged(nav, status, scale, grid, map, terrain, road, border, building){
var options = ge.getOptions();
var form = document.options;
if (nav) {
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
}
else {
ge.getNavigationControl().setVisibility(ge.VISIBILITY_HIDE);
}
options.setStatusBarVisibility(status);
options.setScaleLegendVisibility(scale);
options.setGridVisibility(grid);
options.setOverviewMapVisibility(map);
ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, terrain);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, road);
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, border);
ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, building);
}
</script>
</head>
<body onload='init()'>
<center>
<div id='map3d_container' style='border: 1px solid silver; height: 510px; width: 767px;'>
<DIV id=map3d style="HEIGHT: 100%">
</DIV>
</div>
</center>
</body>
</html>

I ran the sample and didn't get any errors when closing the tab.

try this
yourWebBrowser1.Document.Write(String.Empty);
when you close the app.
my question:
can you show me how to use AddKML(kml) in C# app? by string or file path, I tried both.
I am looking for a way to parse kml files...