I'm new in ASP.NET and i have a little problem . I have a master page which has a div and i want to edit the height of this div dynamically with code. I don't want to change the href to another css file , i just want to edit this css file.
<div id="div" runat="server" ></div>
#div
{
position:absolute;
background-color:red;
width:200px;
height:150px;
}
I tried this , but doesn't work :
System.Web.UI.HtmlControls.HtmlGenericControl div;
div.Style.Add("height","200px");
This should do the trick...
If you're writing this code in the code-beind of the master page you can just write the following:
div.Attributes.Add("style", "position:absolute;background-color:red;height:200px;height:150px;");
Otherwise, if you're on a content page, you'd add this before the code above...
var div = (System.Web.UI.HtmlControls.HtmlGenericControl) Page.Master.FindControl("div");
Although Scottys answer is correct, a nicer way might be the following:
div.Attributes.CssStyle.Add("height", "200px");
This will allow you to change individual css attributes.
Related
I need to change this A tag from
<a href="contact.html" >Contact</a>
to
<a href="tel:+13174562564" >Contact</a>
with only Css if it's possible or like this
<a href="tel:+13174562564" >+13174562564</a>
i have a lot of pages and i don't want to edit all of them it will take a life time that's why i need to do it in CSS and i have no JS linked to them
CSS is display only, you cannot modify the document object model with it. Sorry, this cannot be done. I wish I had a better answer, but 'it cannot be done' is the only answer.
CSS is for presentation and cannot be used to modify the HTML markup in the way you intend.
You need JavaScript for this.
It should be a fairly short script.
one solution is to hide a tag and put another
<div id="tag1">
link1
link2
</div>
css :
a[href="#tag1"] {
display:block;
}
a[href="#tag2"] {
display:none;
}
#tag1:target a[href="#tag1"]{
display:none;
}
#tag1:target a[href="#tag2"]{
display:block;
}
I use this method for responsive "buttons" of my menu bar
I need to make all site clickable.
I tried to make ahref before content div but it works only in Firefox&Chrome not in IE.
So I made site as a clickable table like this:
<table onclick="window.location='http://google.pl'" id="Table_01"> ...here goes content...
It's working in Chrome, FireFox and IE ....but... I am wondering if it is right method and it will be working on every computer?
According html5 spec, you can use link tag outside a block tag like table:
<a href="http://google.pl">
<table></table>
</a>
Dont forget to apply display: block to link.
If you dont want to use link tag, you should write your script on js file and not usinf onclick property using id for example:
<table id="Table_01">
js:
function redirect() {
window.location = 'http://google.pl';
}
document.getElementById("Table_01").onclick = redirect;
In my app I have situations where I need to use what I and some frameworks call a "post-link". Basically a link that might be used to delete (or post) data with it and as such must actually be a a form.
I'm using bootstrap as my base css and have assigned the link class to the submit button to give it a link appearance. When using in a table with another, ordinary, <a> tag next to it I can't seem to get the two links to align alongside each other, no matter how wide I make the viewport or table cell.
Here is a fiddle to demonstrate: http://jsfiddle.net/miocene/dbTqC/670/ I'm referring to the pencil and cross icons as my normal link and post-link.
Any ideas how I can get them to align side-by-side?
You either need to define a width for the td or use this. I gave the div in the td a class .lol
DEMO
<td>
<div class="btn-toolbar inline lol">BLAH BLAH</div>
</td>
.lol *{
display:inline-block;
float:left;
width:50%;
}
.lol .btn{
padding:2px;
}
I'm using a podsnack mp3 player. However, every page refresh, refreshes random numerical div ID codes such as id="cover#some-random-number#
So it'll show up like this
covercontainer80191
covercontainer36190
And so forth. What I wanted to do is a display:none to hide the cover side and just display the song titles instead. Is there a way to do this in the CSS?
The code I'm using is actually an <iframe/>.
<iframe style="border:none;margin-bottom: 5px" src="http://files.podsnack.com/iframe/embed.html?hash=ah3fblli&t=1369709402" width="425" height="320" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" ></iframe>
If it's in an iframe I don't think there's much you can do with only CSS. It's a separate document and won't inherit styles from the parent document.
However, in your case you can do a little trick to accomplish your goals. Wrap the iframe in another element with overflow:hidden, then position the iframe in a way that hides the unwanted content:
<div>
<iframe></iframe>
</div>
You'll have to tweak the numbers here, but this seemed good for your case:
div {
overflow:hidden;
width:199px;
height:260px;
position:relative;
}
iframe {
position:absolute;
top:-43px;
left:-200px
}
Demo, with just the playlist displayed: http://jsfiddle.net/sxyXF/
However, the "cover side" also contains the play button, so there's no way to play the tracks.
If i'm understanding your question you want to hide all of these instances...if that's the case you can do this in your CSS to hide them
div[class~="covercontainer"]{
display:none;
}
I've got a DIV I want to hide, but I cannot give it a specific ID... actually I cannot change the text of the DIV, since it is retrieved from a database, but I can add some html before it AND I know the exact text content of the DIV.
It's something like:
<div class="this_div">content_of_this_div</div>
So, I thought that maybe looking for the specific content, then taking the div and incapsulating it in a hidden div could work... or something similar... any idea?
thanks
If you can insert other HTML around it then you can use another div to hide it
Using CSS and HTML
.hidden { display: none; }
...
<div class="hidden"><div class="this_div">content_of_this_div</div></div>
Using HTML and Inline CSS
<div style="display: none;"><div class="this_div">content_of_this_div</div></div>
Wrap it in your own div would seem most sensible.
<div id="mydiv">
<div class="this_div">content_of_this_div</div>
</div>
then hide your div:
document.getElementById("mydiv").style.display="none";
Or, use jQuery. If that is only instance of class, you could do
$(".this_div").hide();
If you just want to be able to select it without giving it a specific id, you can do a number of things. Make an empty div with an id before, then use the direct sibling selector:
#divid+div {}
or use many other css selectors to accomplish same
But I do reccomend the aforementioned external div technique over this