I've created a scrollview with some pages. Inside the first page there's something like :
A very very long text which cannot be in the screen, [...]
But the text does not fit in the whole screen, it looks like this :
If I disable the scrollview :
Do you have any idea how I can wrap the content of a page to fit the screen ?
I find it.
Kendo UI has in its CSS (for the Scrollview) :
white-space: nowrap;
But you can't change it because it'll broke all the scrollview.
You must change your div-page like this :
<div data-role="page" style="white-space : normal;">
<p>SOME VERY LONG TEXT</p>
</div>
Make this for every page you want to be wrapped (very useful for small screen like iPhone)
Related
The assumption behind this question is that the designer is using proportional queries in a Responsive Web Design and going from 1-column on a smartphone to 2 and 3-column on the displays where they will comfortably fit.
A content widget jQuery plugin (like a Recent Updates widget) should change it's character in the different layouts. In 1-column layout it might need to be 4 small text links and in 2 or 3-column layouts it can include thumbnails and extra text.
For reference, here's the code as the end-user of the content widget would see it.
HTML:
<section id="sidebar">
<section id="latestupdates"></section>
</section>
JS:
(function($){
$(function(){
$("#latestupdates").widgetco_latestupdates();
});
})(jQuery);
I think the best way to hook into the designers layout changes is this. Ask for the breakpoints as parameters for widgetco_latestupdates during initialization and use the resize events to toggle css classes.
Is this even the right method? What are the pitfalls with doing this?
UPDATE:
Since asking, I have found enquire.js which will handle running the queries. That still leaves the question of this being the right method.
If you are careful with the classes you assign to the content, you can likely control everythinhg with standard CSS.
For example, say your desktop output was something like
<article>
<h1> Update heading </h1>
<img src="..">
<p class="intro"> Intro text ... </p>
<p class="full-text"> Full text here </p>
read more
</article>
Then in your CSS you manage what content to show on which devices with
#media screen and (max-width: 480px){
/* for smartphones */
article img, p.intro{
display:none;
}
}
#media screen and (min-width: 481px) and (max-width: 800px){
/* for tablets */
p.full-text{
display:none;
}
}
I think if you can use CSS to manage the different layouts it will be more flexible and easier to update going forward.
Good luck!
EDIT
If you are thinking about ajax to add / remove content based on the visitor's viewport, here are two interesting links:
http://filamentgroup.com/lab/ajax_includes_modular_content/
Project on Github
Im trying to create a horizontally scrolling gallery but I would like to avoid defining the width on the div. Someone else is touching the html - I want her to be able to drop in as many li as possible without having to touch the css and redefining the width.
The mock site is here: rachelbeen.com/Carmen.
Safari recognizes where the content ends and stops the horizontal scroll - but firefox maintains that extra space as defined by the width:6600px; on the #gallery ul. How do I stop that from happening?
Would like to avoid plugins if possible and use only CSS.
Thanks,
-Rachel
I had the same problem and I tried this:
#full{margin:0 auto; overflow:auto; height:100%; width:1050px;}
// width is just for controlling the viewport.
#holder{float:left; margin-right:-30000px;}
.box{float:left; margin:2px;}
and HTML should be like:
<div id="full">
<div id="holder">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
</div>
add many DIVs as you want and it'll make more space for you boxes without giving it a specific width. I hope it helps you.
Is it possible to change CSS position of a background image with a DIV ("omega") from a separate link ("alpha") with a MOUSEOVER?
<a class="omega" href="#"></a>
<div id="alpha"></div>
Is JavaScript/jQuery ok? If so, something like this should work:
$('.omega').hover(function(){
$('#alpha').css('backgroundPosition', '500px 150px');
}, function(){
$('#alpha').css('backgroundPosition', '0px 0px');
});
The first function is for mouseover, the second one resets it when the mouse leaves. Admittedly, I haven't tried this, but in theory it should work. See jquery hover and jquery css for more info.
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 ...