I am using the DNN MobiNuke Module (v02.00.03) from DataQuadrant to create a mobile version of a website I have created. Everything is going well EXCEPT a weird issue I am running into with the Mobile Skins. I have a simple Mobile Skin that looks like this:
<div id="mobile_frame">
<div id="mobile_header">
...
...
</div>
<div id="main_wrap">
<div id="mobile_main" class="sub">
<div id="ContentPane" runat="server"></div>
</div>
</div>
<div id="mobile_footer">
...
...
</div>
</div>
The issue that is arising is that ANY content in the ContentPane that has an empty div tag will change itself when rendered in a mobile browser:
<div class="xxxx"></div>
Will change itself to
<div class="xxxx" />
The biggest problem that this is causing is that the browser is interpreting the tag as an opening div tag with no closing tag. Therefore it is placing an ending div tag essentially wherever it wants. It's causing ALL of the markup after this area to get very messed up.
Here is an example of the code as it should be, and how it is rendering on the page:
Should be:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
</div>
<div id="mobile_footer">
...
</div>
</div>
But it renders as:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
<div id="mobile_footer">
...
</div>
</div>
</div>
I can fix this in the markup that I have control of by putting inside of the tags, but I do not have the time/energy to go through EVERY module that might be showing up in the ContentPane to check for empty tags. In addition, there are places where I want an empty tag to fill it with content later with javascript.
Lastly, I did a TON of research to look this up and I cannot find a thing. The closest that I found is that this happens in XSLT when transforming some XML, but as far as I know MobiNuke is not doing that.
Any help is greatly appreciated. Thanks!
I have figured out the issue after having a discussion with the vendor. There is a setting in the module settings called "Enable content adaptation". Apparently the setting will try to make the HTML to be XHTML compliant, but it was definitely not working for me. Hope this helps anyone else seeing this.
Related
Fiddle
I need to have my image inside 2 divs, why does it appear and then disappear?
I need it so that it's always on screen.
<div class="ad-container">
<div class="ad-item">
<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg"/>
</div>
</div>
Panthro,
Check and make sure there is no Javascript and any other code manipulating the classes: ad-container and ad-item.
The snippet of code you provided in the fiddle looks fine to me. There must be other code manipulating those classes.
Remove ad from the class names. JSfiddle blocks the content related to ads similar to AdBlock functionality.
<div class="container">
<div class="item">
<img src="http://joomlaworks.net/images/demos/galleries/abstract/7.jpg"/>
</div>
</div>
JSfiddle
I had the same issue. I was able to solve it by turning off my adblock for the page.
Your CSS must be causing the issue, check it or post what it is here.
This is really weird to me. Here's my code
<section class="work">
<div class="scw">
<div class="work-entry">
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" />
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
View project
</div>
</a>
</div>
</div>
</section>
If you have a look here http://jsfiddle.net/H2YxH/1/ and inspect the h2 tag, you will (hopefully) see it everything inside work-desc wrapped in a tag. Why is this being generated, when it's not in my code?
When the browser sees the other <a> tag inside the first one, it concludes that it has to close the first tag before it can open a new one.
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" />
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
</a>
View project
But this is an invalid DOM structure: the div has to be closed before the anchor can be closed. Because closing the div now would be rather destructive (and there'd still be a stray </div> up ahead to handle), it decides that it's better to duplicate the anchor so that everything it encloses in the markup is enclosed in the DOM too.
This is what happens in Chrome. Other browsers might behave differently. With invalid HTML browser behavior is undefined and can be whatever the browser considers best.
You can't encapsulate links/ "a"-tags in each other. Although it makes sense sometimes, it's generally a bad idea.
In addition:
You probably use "Right-click"->"Inspect Element"? The code you will see may not be the code you've written. This is because the code you will see is the code, that the browser creates during parsing and the code you see may change on-the-fly (e.g. you change an attribute with JavaScript). To see your actual code you always have to use "show sourcecode" in the contextmenu, but this probably doesn't work on jsfiddle.
Please read the comments in the code below first...
<section class="work">
<div class="scw">
<div class="work-entry">
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" /></a><!--// You might want to close your anchor here... //-->
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
View project
</div>
<!--// </a> and remove this one ;-) //-->
</div>
</div>
</section>
You can't open an anchor twice if you did not close the first anchor, so I kindly ask to close an open anchor before you open a new anchor, I hope this will be helpful to you. Happy coding!
I am very new to Jquerymobile,html5 and css.Now I am working on jquerymobile project in that i need to display the html code which i am getting from rest service in a page and i am doing by using the following code.
<div data-role="content" style="width:700px">
<div id="html_content">
</div>
</div>
and javascript is
$("#paystub-html").live('pageinit',function(){
$.getJSON(url,function(events){
$(events).each(function(i,item){
$(item.Data).appendTo($("#html_content"));
});
});
});
I can display the html but not fully its not scrolling horizontally.I tried by using overflow tag also but its not solved.
Is there any other way to do that one ? how ?
Thanks in advance.
This situation can be solved with overflow, but you will first need to remove the width from the content to have things handle properly
<div data-role="content">
<div id="html_content" style="overflow-x:scroll">
</div>
</div>
You can test it here
By the way, jQuery mobile standard usage would require you to include your content in a page container.
I'm using Visual Studio 2012 for an MVC web app using code first method with EF 5.0.
I have written the following code to make a modal window appear at some point:
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"><img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/></div>
<div id="mod-content"></div>
</div>
</div>
If works fine, exept that the image <img src="~/Content/icons/close.png" [...] /> cannot be found by the browser which thinks its URL is
http://localhost:49895/Class1/Home/~/Content/icons/close.png
To be precise, every code under my div's got broken URL. If I put my image above the div's it's displaying correctly with the following URL:
http://localhost:49895/Content/icons/edit.png
Do you have an idea where i messed things up?
Edit2: example (after problem being resolved)
This works:
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
This doesn't work:
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
Could be a bug in the new Razor 2.0 tilde parsing, or you've mucked up your html by missing a quotation mark or something. Try using the more explicit way of resolving urls
<img src="#Url.Content("~/Content/icons/close.png")" />
If that works then it suggests a razor bug, if it doesn't then your html is probably broken somehow but the extra # symbol may be enough for the parser to kick in and tell you what is wrong.
~ is an asp code element, not HTML. As such it doesn't get rendered by the HTML.
Try wrapping your src with #Url.Content
<img src="#Url.Content("~/Content/icons/close.png")" />
I'm using context to print blocks into a region. However, I'd like to have the region print wrapper DIVs around the blocks of the given area. I know this is possible with region.tpl.php in Drupal 7. I can't seem to figure out the best way in Drupal 6.
<div class="{region classes i.e. sidebarleft}">
<div class="{block 1}"></div>
<div class="{block 2}"></div>
<div class="{block 3}"></div>
<div class="{block 4}"></div>
</div>
However, currently it prints like this:
<a id="context-block-region-right" class="context-block-region">Right Sidebar</a>
// the previous anchor tags is hidden
<div id="block-block-82" class="clear-block block block-block">
<h2>Community Navigation Block</h2>
<div class="content">
<div id="community-landing-navigation-menu">
<div class="joinCommunityBox">
<div class="community-landing-pagePanelWrapperSideBar">
<div class="community-landing-pagePanelWrapperSideBar">
<a id="context-block-block-82" class="context-block editable edit-community_contexts"></a>
</div>
</div>
I wish it would print a region wrapper tag around ALL of that...
Also, I want to keep my page.tpl.php clean of extra wrapper tags. It would be better if we could preprocess regions to print a wrapper tag.
I figured it out... The answer is actually borrowed from zen. If you click the link below, several 'preprocess functions' are rendering a new region template. Then, blocks are collected into that region, and printed.
http://www.drupal.org/node/223440#comment-5304866
It works great, and is going to go production soon.