Dynamic Resizing Text Display On A Limited Screen Space
Jul 26, 2010
A UI built using HTML and CSS has limited screen space. One of the elements is a div tag (<div id="mtext">) that will contain text of variable length. If the text is > 500 characters, I am displaying it as a link. When the user clicks the link, I want the text to be displayed in a layer above all the rest of the elements in the page. How can this be done using javascript..
Code:
A div element that contains some text of variable length. If the length exceeds say 500 characters, Display it as truncated text. ( like "Example text...") The entire truncated text becomes a link When the user clicks the link the content in the div element "pops out" to fill the screen above other elements on the page Image showing truncated text... (before clicking) Image showing text display after clicking the text...
I have created a simple portfolio item for a site I am working on, with left and right buttons to move between the visible thumbnails in the portfolio.
The problem is this: when I click on one of the left or right buttons used to scroll the active list items, it resizes the space between all of the thumbnails by 1 pixel per click, up to 10 clicks.
I am using the bookflip plugin i found here: [URL]
I am attempting to modify the code so the book pages resize based on the screen width... or height... not really sure how this should be done as I need the proportions of the pages to stay consistent.
I have been able to achieve the resize on page load but I now need to add the resize() method to the variable.
This is what I have so far (original code):
var $containerwidth = $(window).width(); var $pagewidth = $containerwidth/1.22; var $pageheight = $containerwidth/2.05;
I think I need to add an if() statement in the variable that says if page width or height changes resize else original code that is working. I have this code which I know works but I can't seem to get to work with one variable without overriding the original code... which doesn't work with this application.
I have a small dillemma I'm trying to solve involving javascript and I was curious if anyone here might be able to tell what the issue is. I'm redesigning my portfolio, and I have a page that involves popup windows, which can be seen at www.souledesign.net/final_site3/portfolio_flash.html. When I click on an icon, it pops up a window successfully. However, the height value I have inputted for the window is ignored, and the window automatically sizes itself vertically to the full height of the web browser.
The code that I've placed on the button that pops up the javascript window looks like this:
This should open a simle XHTML document sized to 496x70px, containing a Flash movie that is displayed using swfobject javascript. unfortunately, the window ends up resizing itself to a height that fills up the entire page rather than properly sizing to 70 pixels.
Its my first in this community and I hope someone can help me on this one. I�m currently working on the personalization of the layout of SAP ERP Portal. This Portal Framework uses Iframes to display the current page and/or applications on the Current Page.Here is a custom draw of a page
---- Custom Componentes Like Menus etc
----- Iframe (InnerPage) � Shows the Current Page
--------This Page can have embedded content and/or More Iframes with Applications
All the Iframes are on the same domain but I only have acess to the innerPage Code and not to the iframes that have the applications.Now we want the innerpage to automatic resize to the current content. This is being a problem (even after using jQuery Plugins or Resize Scripts) because:
1)The Iframes that have the applications change content height using Ajax/DHTML (not triggering load event) and this resize scripts wont call the resize mechanism.
2)I don�t have access to the applications source
3)On some tests ive made using Scripts ( for example Auto Height Jquery, SSI Dynamic Drive )some iframes display the same clientHeight and ScrollHeight Even if theres a scrollbar in the browser window.
Does anyone know of how I could dynamically resize an iframe based on the content's height (for IE) so that no scrollbar appears for the iframe? The content will be from a different domain. I have searched on the web and have seen solution like this
<script> function resize() { var oframe = document.getElementById("frameID");
The html : <iframe onload="resize()" src=http://different.comain.content border="0" ....... > </iframe>
I have seen 2 solutions on the web, the only difference being lines (1) and (2) get substitued. My browser is version IE 6.
It seems that the solution with line (2) works perfectly when the content is from the same domain but gets a Permission Error if the domain is different.
When the content is from a different domain solution (1) does not give Permission error, but instead the scrollHeight is significantly smaller than the actual content. Even if the content is from the same domain it still gives the wrong size.
So my question is 1) What is the difference between oframe.document and oframe.Document, why does it give different results?
2) More importantly, how can I dynamically adjust the iframe size based on the content height from a different domain?
I have an accordion in which all the data is being populated from a database. The problem is that after it runs through the query and adds my data it leaves alot of extra spaces which leads the user to have to scroll a great deal before finding the next header.
Here is my code.
<? $sqlQuery = "SELECT id, date, name FROM webinars "; $result = mysql_query($sqlQuery); ?>
Where the inputs sum1 and sum2 are text fields you put whatever numbers you want in. That works fine. Great. Now what I'm having trouble with is modifying the code so that it will add one form with an input number with a form that spits out a randomly generated number.
This is what I'm using for my random number generator. So basically I want to be able to put, say, 5, into the input text field above this. And then click on the d20 button to get a random number, say, 15, and then have the first code add the inputted 5 with the randomly generated 15.
We're using a fade image slideshow from : [URL]. On our webpage: [URL]. It works perfectly in Firefox, Chrome and Safari. However in I.E. ( were using v.9) it shows no images at all, just a blank space. The code is exactly the same as the page on javascriptkit yet his images fade as they should ours do not show at all.
I'm working on a javascript-only application that queries an in-memory database, at times requests (all internal to the JS app) are lengthy, so I need to post a "Processing..." overlay atop the clicked UI tab to provide user feedback that something is actually happening. For the life of me I cannot figure out how to push the "Processing..." content to the screen while the DB lookup is underway. It appears that there's only one shot at updating the display, and that's when all JS processing has concluded (ie, the data has been looked up and is displayed).
Im using dreamweaver and I am wondering if there is a way or some sort of code I can stop the user from resizing text with the cntrl + mouse wheel ? Ive got CSS style sheets attached to my site but dont know what to do next?
I want to dynamically resize textareas to always have enough rows to hold the data, so there is never a need for a vertical scroll bar no matter whether the user types in large paragraphs or only puts one character per line. Is there some kind of existing facility for doing this? Perhaps in a library? Or maybe there is a property of the textarea which can be checked in a row-incrementing loop to determine whether a scrollbar is still needed.
So my task was to build basically photo-based department org-charts for a SharePoint 2007 environment. Not sure why I was asked to do this as the last time I web designed was when Netscape 4.0 and IE4 were still duking it out, but whatever.I inserted my images (125x125) into tables and everything looks great. on my screen.Boss's screen, a slightly smaller monitor with a lower resolution, not so much.I'd like to be able to dynamically resize the image display sizes based on detected screen resolutions, or failing that, have at least 2 image libraries using 75x75 and 125x125 and then load one image size or the other based again on detected screen resolutions.
I have a project involving a multipage form with a text resizing function. I'd like to be able to keep the size the user selects as persistent throughout the multipage form (on other pages).
I tried creating a hidden input form and passing the value through it, but for some reason, it didn't work (it's a proprietary templating tool they're using). Am I missing something, or is there some easier way of going about this?
Just in case you're wondering, here's the code. It works beautifully, if only I could keep the font size. function ResizeText(resize)
My aplication starts with a simple login window (login_page.aspx). Once the login/password is validated I redirect to an html which contains 3 frames. (mywebsite.html)
The web site I am working on has 3 frames: left frame is for the menu, top frame is where the user enter the search criteria and main frame is where the results are displayed.
I want to display the login screen as soon as the Session Timeout expires, so I realized I should redirect to the login page when the session ends. (Global.asax in VB . Net, I Included code in session_end function)
The problem I am having is that the login window is open in the last frame used, and I want to delete the frames. I mean I want to display the login page in a normal document without frames in the same active web browser screen.
I am having serious problems over a JavaScript function. I have 2 x 2 dimensional arrays of data to display on the screen, each array being 18 x 18. The arrays and displaying them is working fine, I have 2 lots of X and Y variable (LocX1, LocY1, LocX2 and LocY2) which I use to reference the cells of the arrays.
I have 2 similar (but not identical) functions to move around these arrays using links on the screen.
[Code]...
As you can see, I have tried multiplying the variable by 1, adding zero and using the Number command. All other directions work fine and all links are identical, just passing a different 'direction' through an onClick.
P.s. I miss placed this post before, and it was sugested I re-check the links that set the functions off. They are all identical (all 8), except for the 'north' 'south' etc. bit.
I'm currently using the Jquery Flipv plugin, which works well. The only problem is, some words have extra padding at the end, depending on how many characters.
I'm not sure why this is, but it seems that the conversion to vertical text creates some extra spacing on certain browsers.
I have a menu (structured in the old fashion UL/LI fashion) that is being controlled by jquery. Initial item selection operates as advertised. But when a "user" selects another menu item, the screen (div) does not reinitalize and react to the click of the new item.Here is my online site that I am working on.In my menu, only the Chemical and Small Arms items are programmed. Here is the code that is controlling say "Bullet" (under Small Arms).
