I have the following partial view, which is just a test bit of HTML, nothing final
#model int
<div id="media-wrapper">
<span id="foo">For more details, click here:</span>
<iframe width="260" height="215"></iframe>
</div>
To use this view I call:
#{ Html.RenderPartial("_MediaLink", Model.PartnerId); }
In Chrome's dev tools, the <iframe> is rendered like so:
<iframe width="260" height="215">
</iframe width="260" height="215">
For some reason, it's attributes are duplicated. Looking at the <iframe> in Chrome dev tools, it is not coloured the same as other elements on the page. e.g. a <div class='test'> will have the div coloured red and class coloured orangy-brown. The iframe is entirely red.
Also the <iframe> is not in the DOM of the page. If you use, say, jQuery to find it, then I always see undefined in any queries.
What am I doing wrong here?
Related
I am using a form in a front-end view of my website. The labels of the input fields show hints/tooltips when hovering over them with the mouse. I would like to style these tooltips with the css of my front-end template. Therefore I need to know the DOM structure of these tooltips.
Somehow, I can not find any documentation about this and using 'Inspect element' in Google Chrome also doesn't help me, because the tooltip is removed as soon as I do not hover the label anymore while trying to inspect them.
Help is very much appreciated!
Default tooltips in joomla back office have this structure, I'm pretty sure that it is the same in front office :
<div class="popover fade right in">
<div class="arrow"></div>
<h3 class="popover-title">[TITLE]</h3>
<div class="popover-content">[TEXT]</div>
</div>
I have a structure which is as follows:
<a href="#">
<footer>
<p>Some text</p>
<h2>A Heading</h2>
</footer>
</a>
This works and displays as expected in all browsers (even IE6 with the HTML5shiv.js) except Firefox 3.6. In Firefox 3.6 the display is completely screwed and if you use Firebug to inspect the DOM, the <footer> element is empty and the elements which should be inside it are outside of it.
All the tags are closed correctly. The <a> is set to display:block in the CSS.
The W3C validator validates the document and does not mark this structure as incorrect.
The spec states that an <a> element may be classed as flow content when it contains other flow content. The <footer> is flow content.
Is it just that Firefox 3.6 doesn't render HTML entirely correctly?
Any ideas for a fix?
Ta!
According the W3C HTML5 Reference the Footer Elements content model is:
Flow content, but with no heading
content descendants, no sectioning
content descendants, and no footer
element descendants.
Which an a element is interactive content.(Which also can be a Flow Content)
So using the a element will validate, if you validate it against HTML5 Standards. Using something like the W3C validator.
So to answer your question, FireFox 3.6 Doesn't conform to HTML5 standards completely. FireFox 4.0 conforms better than 3.6. You can find a list of what elements of HTML5 (and CSS3) are supported by legacy browsers here.
As for the fix I would suggest that you hide the footer from Firefox, and show a div with your content in that is hidden for everything but firefox. I would accomplish this using jQuery CSS Browser Detection using jQuery instead of Hacks is a good place to start.
Firefox 3.6 doesn't implement the HTML5 parsing algorithm; it has an HTML4 "parser", basically.
I think your workaround options are:
Avoid "block level" HTML tags inside the footer.
Put a <span> as a child of <a> wrapping the <footer>.
Put a <div> as a child of <a> wrapping the <footer>.
I've got a simple one but haven't been able to find an example of a solution that fits exactly what I'm asking. Sorry in advance if this is a repeat.
From my navigation menu, I want each link to reference a specific DIV in a separate page and then pull that DIV and replace the content in the current page.
<ul>
<li>About</li>
<li>Contact</li>
..and so on
</ul>
Elsewhere in the page:
<div id="displayContent">Content refreshes onClick. Previous content fades out, fresh content fades in.</div>
Separate page (content.php):
<div id="about">About content</div>
<div id="contact">Contact content</div>
Agree with brhea, a question is a bit unclear.
If I understood well you're looking for something like this?
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
(click car names to see it in action)
OR with jQuery like this:
http://api.jquery.com/load/
So I have add to cart button, which is comprised of an anchor tag that has an image tag inside it. The anchor tag is using a bunch of javascript effects for mouseover etc that does image swap of this image in question etc.
Now, I have a function "AddCartButton" in my codebehind class that handles click event of this anchor tag. This obviously does not work when javascript is disabled. So I replaced the img tag inside the anchor tag with control, but Those swappings are not working for my though.
What are my options? I want the click to be handled by my C# function irrespective of whether javascript is enabled, and I want the mouseover effect when javascript is enabled.
P.S. It is a repost, but there was only 1 view or something for last post, so I changed the title a lil bit.
<div>
<a id = "addcartButton" href = "#" runat = "server" onMouseOut="MM_swapImgRestore()" onserverclick = "AddCartButton" onMouseOver="MM_swapImage('Image1111111111','','../_images/b_addCart_f2.gif',1)">
<img runat = "server" src='../_images/b_addCart.gif' AlternateText="Add to Cart" name="Image1111111111" width="106" height="29" border="0" />
</a>
</div>
So basically I want something that is working even when javascript is disabled. I still want all those mouseover effects etc when javascript is availabel though.
have you looked at ImageButton class?
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.imagebutton.aspx
All,
I am using JQuery UI Nested tabs. Consider the structure like this: There are 2 Main tabs: Animals, Birds. Under Animals, there are two tabs "Cats", "Dogs". Both the tabs "Cats" and "Dogs" should be loaded via AJAX when selected.. So, the code for them is something like this:
<div id="fragment-1">
<ul>
<li><span>Cats</span></li>
<li><span>Dogs</span></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("#tabs-loading-message").show();
$('#fragment-1').tabs({cache:false, spinner:''});
});
</script>
The issue is, I want to maintain a common div to load the AJAX urls. Ex: When you click on Cats or Dogs, the content for those tabs, should go into "<div id='commonDiv'></div> instead of going into "cats" div and "dogs" div.
The loading should be reusable, in the sense, if call reload("Dogs") from anywhere inside "dogs" tab, it should reload the "dogs" tab content.
How can I achieve this?
Just looking at the docs, nothings pops out as to how to do that. It's easy enough to not use the tabs widget though, and define your own click events for basic tab functionality.
<div id="fragment-1">
<ul>
<li><span>Cats</span></li>
<li><span>Dogs</span></li>
</ul>
<div id="commonDiv"></div>
</div>
$(document).ready(function(){
$('#fragment-1 a').click(function(){
$('#commonDiv').load($(this).attr('href'));
});
}):
You would need to define your own css styles though, as it looks like the tabs widget does that for you.
Not sure if I understtod you well; as far as I know if you give all your tabs the same tittle atribute, the UI will rehuse the same DIV to load the content, instead of creating a new one for every tab and hide or show as required. Is a good thing since the browser doesn't get so heavy weighted with a lot of DIVS loaded but hidden ...