I have a div and inside that div I have my site logo etc...
I want that when the user clicks the site logo (my div) it will redirect him to the homepage.
How do I do it? (div onlick??)
<div onclick="window.location.href = '/';">...</div>
replace '/' with your URL or URI.
<div onclick="window.location='http://www.google.com';" style="cursor:pointer;">Content...</div>
Replace http://www.google.com with the relative path to your site's root. The style tag just switches the cursor to a pointer so user's know it's clickable.
<img src="logo" onclick="window.location('myHomePage');">
<div onclick="window.location('myHomePage');">stuff inside the div</div>
you can also change the window.location for a window.refresh(); if you want to refresh the page.
Will an anchor tag work for this (I don't know what your HTML is like, etc.). It will be more semantically correct and will not require javascript. I don't think there are any browsers that object to DIV elements inside A elements.
http://jsfiddle.net/4s87y/
<a href="http://www.google.com">
<div style="height: 100px; background-color: #ffcccc;">
This is a test. Woohoo!
</div>
</a>
one way is to use: onclick="function(){ location.href = 'http://www.yoursite.com'; }"
another one is to put the div with site logo inside an anchor tag like <div>sitelogo</div>
If you want it for OnClick then use it like this
<div OnClick="window.location=http://example.com">Your Content and Logo</div>
Related
So as of right now, I'm using my _Layout.cshtml page to build the header, body and footer, and in the bodu I'm doing this in order to render my Index page:
<body class="darkDesign">
<div class="container-fluid">
#RenderBody()
</div>
</body>
And my index page is just the default one that comes with the template:
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about building Web apps with ASP.NET Core.</p>
</div>
The issue is that I want to add a class to the body tag but it won't render it because it seems as RenderBody dynamically renders the body tag for me and this is what it looks like in the DOM editor in Chrome.
How do I properly add the class to the body tag?
The problem in not Razor, as #Wiktor-Zychla mentioned, RenderBody doesn't dynamically render the body tag. (the Body in RenderBody means the page/layout content/body)
Also as I mentioned in the comment section, the <!--Loader starts--> part is not in your source (Razor), so darkDesign class removed by JS when you visit the page in the browser. as you confirmed, you should be able to see darkDesign class in body tag in page source. (in your browser hit Ctrl + U to see the page source)
So
If you using some JS library/framework (or jQuery plugin), you should check their documentation to see why they removed class from body. maybe you can disabled this behavior or tell them to add your class.
Another way (easy and dirty one) is adding the class using JS, just make sure your code execure after their code.
You can mention which library/framework (or jQuery plugin) you using, then maybe I can help you more.
I want to change background image of my page dynamically.
Code in my aspx page is:
<li style="background:url(/newtheme/images/city-images/City-name.jpg) no-repeat center 93px;"></li>
/newtheme/images/city-images/ this part of URL is staic.
while City-name.jpg will keep on changing like California.jpg, Dubai.jpg, etc.
Please help,
Thanks
If you want to do it server-side in your the give your LI an ID and runat="server" attribute:
<li runat="server" id="liCity"></li>
Then in your C# code you will be able to do something like
liCity.Style["background"] = string.Format("url(/newtheme/images/city-images/{0}.jpg) no-repeat center 93px;", "Moscow");
I am getting below text from database with href as null.
You also have to click on this link .
This text I am assigning to the label when page loads.
My requirement is when I click the "link" I need to redirect to certain page. Where should I assign the href value and how?
<script>
var s = document.getElementByTagName("a");
s.href = ""; // here give the href value
</script>
If you are using jQuery you can set the href using the following code:
$("a").attr("href", "http://stackoverflow.com");
In the aspx page you can write the following line to create a placeholder
<div><%= linkValue %></div>
And in the code behind create a global variable
string linkValue = "You also have to click on is <a href='' target='_blank'> link </a>";
/* Set the page URL where you want to redirect the page. in your case get the value from database. */";
I think this is what you want to do. It was not completely clear from the question.
Updates:
In case you have multiple links in the page you need to create the link along with label.
See the code below
HyperLink link1 = new HyperLink();
link1.Text = "LINK HERE";
link1.NavigateUrl = "http://somedomain.com";
And add to the container like this
container.Controls.Add(link1);
document.getElementById('myAnchor').href="http://www.google.com";
Simple enough :)
In case, you also want to Change URL and text of the hyperlink...
<html>
<head>
<script type="text/javascript">
function myHref(){
document.getElementById('myAnchor').innerHTML="Visit Google"
document.getElementById('myAnchor').href="http://www.google.com"
}
</script>
</head>
<body>
<a id="myAnchor" href="http://www.java2s.com">Visit Java2s</a>
<form>
<input type="button" onclick="myHref()" value="Change URL and text">
</form>
</body>
</html>
Source: java2s
I am going to create a Iframe which must update its contents dynamically (through the src attribute - The Iframe will change its location every time a different button is clicked) to play different youtube videos that my company has created. The problem is that I saw that you can use jquery to achieve this. I am oblivious to jquery at the moment, but will take time to learn it. For now, I need an answer. How do I use Jquery (or any alternative browser friendly method ) to Change the src Attribute of my Iframe?
<script runat="server">
</script>
<div style="margin-left:auto;margin-right:auto">
<table style="width: 960px" cellpadding="0px" cellspacing="0px">
<tr>
<td rowspan="6">
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/JZOxqVl5oP4"
frameborder="0" allowfullscreen id="VideoPlayer"></iframe>
</td>
<td style="Width: 130px">
<img width="130px" src="./Images/Video_Logos/l_absa.gif" />
</td>
...
Note that there are 10 buttons. The buttons are images, and I was planning to call different "Methods" for different videos to play.
I know about javascript's Document.GetElementById("VideoPlayer").SetAttribute("src","NEW LOCATION") within a function, but , lets face it. IE6 + 7 sucks.
Just use a link. No need to mess around with JavaScript.
You will need to give the frame a name, that is how links target frames.
<a href="http://youtube.com/etc/etc"
target="name_of_frame">
<img width="130"
src="./Images/Video_Logos/l_absa.gif"
alt="something" />
</a>
The width attribute takes an integer value (or an integer followed by a % character), not a CSS length. Get rid of the px.
The alt attribute on <img> elements is mandatory (even in HTML 5)
From the answer given in:
How do I dynamically change the content in an iframe using jquery?
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
var locations = ["http://webPage1.com", "http://webPage2.com"];
var iframe = $('#frame');
$(iframe).attr('src', locations[1]);
});
</script>
</head>
<body>
<iframe id="frame"></iframe>
</body>
</html>
I would recommend not using an iFrame to play the YouTube, take a look at the Javascript Youtube API:
http://code.google.com/apis/youtube/js_api_reference.html
I have bunch of HTML code I am using to make rounded edge boxes on my controls. Is there a way to take this code and turn it into some kind of control or something so I do not have to keep pasting 10 lines of HTML code around everything I do?
<div id="BottomBody">
<div class="box1024" >
<div class="content1024">
<div class="top1024"></div>
<h1>My Header Information</h1>
<hr />
<p>Some text for everyone!</p>
</div>
<div class="bottom1024">
<div></div>
</div>
</div>
</div>
One additional thing to note, the number HTML tags used inside the inner most DIV will change depending on where I use it in my site. So in some cases I will only have 1 tag and 1 tag but in other cases I could have 1 tag, 1 tag, 3 tags, and a HTML table. How can I make that work?
Yes, you're thinking of a UserControl. Extract the relevant HTML out, paste it into a UserControl .ascx template.
Now in your case, you'll probably want the text to be customizable, am I right? So you'll need to replace the <h1> through </p> bit with an ASP.NET label. The resulting .ascx HTML (not counting the #Control directive) will look something like:
<div id="BottomBody">
<div class="box1024" >
<div class="content1024">
<div class="top1024"></div>
<asp:Label runat="Server" id="label1" />
</div>
<div class="bottom1024">
<div></div>
</div>
</div>
</div>
Alternatively, you could do two labels -- one for the header, one for the main text. Or even just have the header be runat="Server" itself.
Next, you'll write a little bit of code in the .ascx code-behind file to expose the label's (or labels', as the case may be) Text property. This would probably look something like:
public string Text
{
get { return label1.Text; }
set { label1.Text = value; }
}
If you're in an ASP.NET MVC world, use your Model data instead of a label, and pass in the desired display text string as the model data.
Edit
Addressing the update to the question:
One additional thing to note, the
number HTML tags used inside the inner
most DIV will change depending on
where I use it in my site. So in some
cases I will only have 1 tag and 1
tag but in other cases I could have 1
tag, 1
tag, 3 tags, and a HTML table. How can
I make that work?
The exact same technique, assuming that the content you're referring to is what's within <div class="content1024">. The Text property of a label can contain any desired arbitrary HTML, and of course you can pass any arbitrary amount of HTML as a string to the Model if you're using MVC.
Another left field approach - create a user control but use jQuery to round the corners for you:
<div class="roundcorner">
<h1>My Header Information</h1>
<hr />
<asp:Label runat="Server" id="label1" />
</div>
Issue the following in javascript:
$(document).ready(function(){
$('div.roundedcorner').corner();
});
This eliminates all your extra div's and you can still have a user control that you use at will on the server.
(I know I'm going to get in trouble for this from someone)
If its just static content you can just put it in a separate file and INCLUDE it
<!--#INCLUDE VIRTUAL="/_includes/i_yourfile.htm" -->
(File name, extension and location are arbitrary)