I not sure the reason or how to explain it clearly, but my web UI is all great in firefox and crome.
I use httprequest to get data and show information in UI dynamically, but only IE cannot shows data correctly.
I use a block to change the innerHTML depends on the data returned, and the UI are <select> and <ul><li>.
My block is like that:
<ul id="roomlist" class="room_menu">
<li id="allroom" class="txtunderline" style="text-align: right;">All Room</li>
</ul>
There is an original li called 'allroom', after get data from server, the block 'roomlist' will change the innerHTML.
In function onreadystatechange, I get some data and put into array, then change roomlist like:
first, add the last li called 'createroom'
var createRoom="<li id=\"createroom\" class=\"txtunderline\"><div style=\"text-align: right;\">"+"CreateRooms"+"</div></li>";
$("#allroom").after(createRoom);
then add each li of rooms, but IE(I tried IE8, IE10) just show the allroom and createroom, others not showned. I guess maybe that is because other <li> is customized with image like:
var oldRoom="<li id=\"room"+index+"\">";
oldRoom+="<table style=\"width: 100%; position: relative; top: -2px; left: -2px;\"><tr><td><img width=\"28px\" height=\"28px\" src=\"images/location/" + locatImg[index] + "\" /></td><td align=\"right\">" + locatInfo[index]+"</td></tr></table></li>";
$("#createroom").before(oldRoom);
The result may like that in crome or firefox:
but in IE:
If I look the DOM in google will be:
And I use <select> to show the data is empty, too.
I have debugged by alert data, and alert function is ok( can use javascript), but when I alert the data I get, the alert not triggered. It let me guess there may something wrong so the alert cannot pop up until the bug be solved.( but the status bar of IE not show any wrong messages)
I use jQuery, the version is:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
I heard that jQuery not compatible since version 2.0 released, but my version seem not 2.0 version?
And the same kind list(<ul><li> pairs) in other pages are shown well, and there is no image added to the list.
I beat my brains out and hope someone can help me to find out the real problems, any help appreciate!
Edit: Sorry, I try to simplify the list just display text like:
var oldRoom="<li id=\"room"+index+"\">" + locatInfo[index] + "</li>";
$("#createroom").before(oldRoom);
And in IE it still the same:
while in crome the structure is:
Try to reengineer your code to use less inline CSS, and take the tables out. Your approach is very scattered, and you could be running into style conflicts or other issues. For example that position style could be the source of your problem, but it's difficult to know because your markup isn't very semantic.
And it should be noted you're appearing to use tables incorrectly, however it could be that you've just left out a lot of the extra room information that would make this a tabular list of information.
In the case that you are ONLY displaying your room with an icon, you can simply make a series of CSS classes with the background images you want, and then assign the correct class to the <li>.
For example your CSS could include:
ul#roomList, ul#roomList li {
padding: 0;
margin: 0;
list-style: none;
}
ul#roomList li {
width: 10em;
height: 28px;
text-align: right;
text-decoration: underline;
background-color: #A0A0A0;
}
ul#roomList li.roomType1 {
background-image: url('/images/room1.png');
}
ul#roomList li.roomType2 {
background-image: url('/images/room3.png');
}
ul#roomList li.roomType3 {
background-image: url('/images/room3.png');
}
And in your HTML you would simply use:
<ul id="roomList">
<li class="roomType3">Some text for room 3</li>
<li class="roomType1">Some text for room 1</li>
</ul>
However if you really do want to display tabular data, you should not use an unordered list. Instead you should use nothing but a table, and then append rows (<tr>) as necessary. Just make sure you don't put the "All rooms" and "Create room" functional buttons into your table, as those are not tabular data.
A lot of this becomes important later when you are trying to advertise your hotel on search engines. Proper semantic layout is much easier for a search engine to dissect and advertise.
Ok, I find that the httprequest in IE too slowly to get data when I want to change innerHTML of the list. It's my fault, I think I should ensure that the data is received before change UI.
Related
This is my first post to Stack, I'm having trouble debugging some CSS errors on a project I am working on. Here is a link to the page:
http://musiccomputing.com/copy-of-studioblade-5-61-key-macos-x/
You can see how the thumbnails seem to repeat, and there is some text jumbling on the right side, this is what it should look like: musiccomputing.com/studioblade-5-61-key-macos-x/ (sorry they wouldn't let me post more than 2 links).
I was working on adding a "tabbed" section under the product description. Here is the code I added which caused the aforementioned issues to occur. http://pastebin.com/JhbbmFTb. I have been trying to debug this with Pesticide and Firebug, but unfortunately I am still learning, so decided to turn to you guys who I know could solve this fairly quickly.
(by the way this is on a Bigcommerce platform)
Any help is much appreciated.
On your working version - your select boxes are wrapped in a div with a class of selector. This class on the parent is assigning the following CSS to the select box which fixes the styling issues:
div.selector select {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
border: none;
background: none;
cursor: pointer;
height: 100%;
}
Add the parent back - or add a new parent with a class of .select and the boxes will display correctly again.
Edit
On your thumbnail viewer there is a class of "ProductTinyImageList" with some styles that are being added dynamically - probably via JavaScript.
When looking in the console on your site there is also an error on line 12 of init.js - this error is probably what is preventing the rest of your JS from executing and probably what is breaking your thumbnail viewer.
The first thing I would do is fix that JS error - then retest.
I've been playing around with changing the way my portfolio looks and I've been struggling with getting my expander to push elements down (like google images does).
My test is here: http://chris-carpenter.co.uk/new/
I've used this as a starting point to add a filterable option for my work:
queness.com/post/14577/create-a-simple-responsive-portfolio-page-with-filtering-and-hover-effect
This is what is causing the problems. I've found ways to create the filterable portfolio, and ways to create a static portfolio that has an expanding content section but combining them is blowing my mind. I can't seem to figure it out.
At the moment this opens and pushes elements down, but the width is limited by the parent div, so anything below & to the right doesn't seem to shift.
<div class="portfolio--expand is-expanded">
</div>
I'm now looking at inserting a content div at the end of the row clicked. Much like this.
http://jsfiddle.net/JfcAu/450/
I'm not experienced enough with JS to understand what's happening and apply it to what I have though. Could anyone help me achieve a filterable grid which has a click to expand option?
I don't expect to retain any current styling ofcourse, since I haven't changed it at all from the original source yet, I just want the function working.
This has been hurting my brain for ages.
Useful things I've looked at:
isotope.metafizzy.co/filtering.html
oriongunning.com/blog/thumbnail-grid-expanding-preview/
You might have to do some width adjustment, but this:
#portfoliolist .portfolio {
box-sizing: border-box;
width: 23%;
margin: 1%;
display: none;
float: left; /* <-- this is taking it out of the DOM */
}
has a float:left - that is taking it out of the DOM - you have to remove the float:left - and then adjust width to maybe 22% or something to let the expanded content push everything out of the way.
I find it hard to get myself started in this topic so I can write my own widgets for my own needs. How can I combine plain text and HTML elements (links, images), like seen everywhere on the web (Google, Facebook, etc), in a HTML textbox in a way that it still behaves all together like simple text (i. e. deleteable with backspace)?
How does this work? What is the underlying "trick"?
Ok, your question indicates that you need a starting point,
lets then start with a basic HTML such as a div, a ul, and an input
<div class="myTags">
<ul id="tags">
<li class="nd"><input type="text" id="tagInput" placeholder="add some tags..."/></li>
</ul>
</div>
now lets write some jquery to handle the tagging:
$('#tagInput').keypress(function(e){
if (e.keyCode === 13) {
tag = $(this).val();
if(tag.length > 0){
var newLi = $('<li></li>').text(tag);
}
$('#tags').append(newLi);
$(this).val('');
}
});
this jquery snippet listens to the keypress event on the provided input which I called tagInput
the enter key goes with keyCode 13 hence, if it is been hit you take the value of the textbox and and create a new li element then you go and append it to your ul.
what is missing here is how to make the ul looks like horizontal, this is a starting css to be used:
#tags{
float: left;
min-height: 10px;
min-width: 100px;
margin:0px;
padding: 0px;
list-style-type: none;
text-align: center;
background-color: #fff;
border: 1px solid #ccc;
}
#tags li { display: inline-block; padding: 10px;}
#tagInput{background: none;
border: none;}
which will make the ul horizontal, and it will delete the background from the input and adds the border and the background to the ul, which is a lovely trick specially with the placeholder being available, Now for the backspace deleting process it is simple too, take the previous jquery snippet and add the following code to it:
$('#tagInput').keyup(function(e){
if(e.keyCode === 8 && $(this).val().length<=0){
$('#tags li:last').not('.nd').remove();
}
});
which what it does is simply check for keyCode 8 which is a backspace, Note: some people would recommend to listen to keyCode 46 which is delete, it is up to you.
and I also check for the input value so it should be empty to delete the last inserted tag.
Now by wrapping it up you have the following Fiddle to check.
which is a good start point so you can now do whatever you want with the tag styles and many other fancy stuff.
Hope that I helped.
Disclaimer: the previous code is not to be copy pasted, and it is there just for point clarification.
Update
also, adding outline:0 to the input will make more real, see Fiddle
#tagInput{background: none;
border: none; outline:0}
This is all done through javascript (mostly). Look into jquery. All the heavy lifting is done and provides you with a "easy-to-use" javascript library for client-side scripting that can make all these things possible. Obliviously the more complicated you get, the more custom scripting will be needed.
If I understand you correctly, you want to display both text and any other content (images) in one editable component (text area) that looks like native component. I think you can easily achieve that with CSS. The whole trick is to clear the default styling of textarea and wrap it with <div> with custom CSS.
See an example here
You can further enhcance the solution with Javascript and CSS. For instance, you can make the textarea to auto expand as you type
Hope that helps!
This is about the jQuery plugin ConceptMap:
https://github.com/allain/JavaScript-Concept-Map
There is also a rewrite of this plug-in by KNV:
https://github.com/knv/jquery-conceptmap-plugin
These plug-ins draw "concept maps." both demos show the maps at the top of the screen. however, if you put any html elements above the div container holding the map, the elements on the map get all messed up- their positions do not shift properly within the browser window in response to the html elements added at the top of the page.
I've tried contacting both developers for a fix but no response. I've messed around with the javascript code in these plug-ins with no success. anyone out there able to fix it? to reproduce the problem i'm seeing, all you have to do is download either plug-in package and edit the demos. just add an <h1> or any other html element to the top of the page above the <div id="container"> element. you'll see the map gets messed up after that.
thanks
J
the problem in http://knv.github.com/jquery-conceptmap-plugin/textarea.html
is in css,try use
#container {
background-color: #EEEEEE;
position: relative;
}
insteadof
#container {
background-color: #EEEEEE;
}
it must fix your problem, tell me if it is ok 8)
http://clifgriffin.com/blockade2/
Ok, I have an unordered list that serves as a list of menu links. In each li there is a div that is set to absolute positioning, bottom: 0. The idea is you hover over the link in the li and jQuery animates the height to show the hidden menu div.
It's a simple concept, but I am apparently confused.
The issue I'm having is that the div that contains the slide down menu doesn't take up any dimensions (according to Firefox and Chrome's calculated style information) when I put it in the li. If I put it anywhere else on the page it renders PERFECTLY. You can see what I mean from the link. The gray menu looking thing at the top is how it is supposed to render inside the li but doesn't.
<div class="ram">
<div class="gray_middle">
<ul>
<li>Guest Services</li>
<li>Concierge / Local Attractions</li>
<li>East Restaurant</li>
<li>Aquarium Lounge</li>
<li>Health Club</li>
<li>Sandcampers Program</li>
<li>Treasure Chest Gift Shop</li>
</ul>
</div>
<div class="gray_bottom">
<img src="images/top_menu_slidedown_gray_bottom.png" />
</div>
There is a bit of javascript going on that is supposed to find the height of the menu div and set the id of the containing li equal to the height so that it can be referenced later. Doesn't matter...the point is, when the div is in the li, its computed height is 0. When it is outside, it's correct.
Any ideas?
This is driving me absolutely batty. I have never had this many issues with something so simple.
Thanks in advance,
Clif
P.S. I added some HTML comments to the destination so that you can better see what I mean.
Absolutely positioned elements are "outside" of a container and can't really determine its size.
Relatively positioned elements impact container size (and content flow) but then they move elsewhere.
Also, for absolutely and relatively positioned elements, you should always give an explicit X,Y position. This avoids some rendering differences, cross browser.
Anyway, I made the following CSS changes and that submenu seemed to render OK on FF 3.6.4:
For <li id="49"> add: height: 230px; overflow: hidden; .
For div.subMenu add: top: 17px; and delete: bottom:0; .
For gray_middle add: height:160px; top:0; and delete: padding-top:20px; .
When you absolutely position an element, it won't expand the size of it's container to the size required to accommodate it.
EXAMPLE
HTML
<div id="outer"><div id="inner">In</div>Out</div>
CSS
#outer {
background-color: red;
}
#inner {
width: 100px;
position: absolute;
top: 100px;
background-color: blue;
}
See it live here - http://www.jsfiddle.net/r7MgY/86/
Hi clifgriffin Had a quick look at you HTML, shame you didn't give us the CSS aswell, but ... there are a few things I'm not sure on - the header says generator WordPress 2.9.2 but the html does look like "familiar" WordPress. If it is WordPress generated then check the wp_list_pages & wp_list_categories tags you are using. Also I serously recommend an upgrade to WP3.0 as it has MUCH more functionality (custome post/page types etc) plus a "built" in menu function.
I think you may be using too much CSS. Most of what you want to acheive can be done with a lot less.
Guest Services
Concierge / Local Attractions
East Restaurant
Aquarium Lounge
Health Club
Sandcampers Program
Treasure Chest Gift Shop
You can then give the ul an ID (remember ID's need to be unique) this will help with any Java you want to use also add to your ram class with a background image class images/top_menu_slidedown_gray_bottom.png. As you use the ram class again without the image. e.g. <div class="ram backgroundimageclass"> You are then saving a lot of "code" and download times etc.
If you give the ram class the attribute "position: relative;" you can then give the UL id the attribute "position: absolute;" the li's can be styled such as
ul#ID li {line-height 30px; etc ...)
ul#ID li:hover {line-height 30px; etc ...)
ul#ID li:hover a {line-height 30px; etc ...)
and so on.
Ohh forgot ... also why not add this code in the head
<meta http-equiv="X-UA-Compatible" content="chrome=1">
And this just after the tag
<!-- DO NOT REMOVE -->
<!-- THIS SECTION SETS THE LAYOUT FOR GOOGLE CHROME FRAME IF YOU NEED FURTHER INFO LOOK HERE http://code.google.com/chrome/chromeframe/ -->
<!-- Google Chrome Frame is a free plug-in that helps you enjoy modern HTML5 web apps within Internet Explorer. -->
<div id="prompt"><!-- if IE without GCF, prompt goes here --></div>
<script type="text/javascript">
CFInstall.check({
mode: "inline", // the default
node: "prompt"
});
</script>
<!-- END THE LAYOUT FOR GOOGLE CHROME FRAME -->
This allows "detection" of the browser and gives them the option (if not installed) to use Google Chrome Frame, you can:
Start using open web technologies - like the HTML5 canvas tag - right away, even technologies that aren't yet supported in Internet Explorer 6, 7, or 8.
Take advantage of JavaScript performance improvements to make your apps faster and more responsive. Enabling Google Chrome Frame is simple. For most web pages, all you have to do is add a single tag to your pages like above and detect whether your users have installed Google Chrome Frame.
If Google Chrome Frame is not installed, you can direct your users to an installation page.
If Google Chrome Frame is installed, it detects the tag you added and works automatically.
Cliff Just "totally" realised what you are trying to do here - sorry took so long to "twig"
OK you can do this with much more ease than you are trying to do at the moment. All it needs is a little JQuery and some basic CSS. No need to positions absolute etc.
In your CSS use { display: none; } for the class="subMenu" as you know this will "hide" it, I might also be tempted to do the same in your JQuery functions to be "doubly sure". Then in the JQuery create a mouseover effect (mouse over "better" than hover) for the class top_menu_links (I think you could take out the classes "aco" and "white_middle" or at least combine them in the css for the relevant ul) to show the .next('ul); you can slide it etc. Then a mouseout function on the ul. That way the ul stays visable until a mouse out event. I have done this quite successfully on a WP theme to display a "dynamic" list of categories on a mouse over event on a div made to look like a button. Sorry don't have the code to hand but will look later and "pass it over"
In addition you can set the ul background image as the approp. <img src="images/top_menu_slidedown_white_bottom.png" /> (or grey) just by setting it to background position: bottom repeat: none; and a bottom padding the height of the image. No need for alt tags etc.
Sorry been "out for a bit" anyhow here is a code I have used to "recreate" your bottom menu. It doesn't do as you suggest it closes after either a mouseout of the "menu item" or the "submenu". To get it to work on the top menu, just change the position from bottom to top:
$(document).ready(function() {
$('.indexMenu').mouseover(function(){
$(this).children().show();
$(this).children().mouseover(function(){
$(this).children().show();
});
});
$('.indexMenu').mouseout(function(){
$('.sub_menu').hide();
});
});
Here is the "html"
<div class="indexMenu">
Menu 1
<div class="sub_menu">
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
Menu 2
<div class="sub_menu">
Item
<br />
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
<div class="sub_menu">
Menu 3
<br />
Item
<br />
Item
<br />
Item
<br />
Item
</div>
</div>
<div class="indexMenu">
Menu 4
<div class="sub_menu">
Item
</div>
</div>
Obviously you can "use" any thing in submenu a ul,ol, etc...
And the "simple CSS
.indexMenu {
position: relative;
bottom: 3px;
width: 240px;
height: 32px;
float: left;
line-height: 30px;
border-top: 2px solid #FFFFFF;
text-align:center;
text-transform:uppercase;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
font-weight: 900;
color:#333333;
}
.sub_menu {
display: none;
position: absolute;
bottom: 33px;
width: 240px;
background-color:#DBF3FD;
opacity:0.8;
filter: alpha(opacity=80);
}
OK I've added a filter in the submenu to have a certain transparency
Gentleman,
Thanks for all of your responses! I'm sorry it took me so long to get back to this post.
This whole issue has revealed a few things I don't yet understand about the way HTML elements are rendered.
I was able to solve this problem by switching the main menu blocks to div elements instead of li elements.
This makes no sense to me in that both are rendered approximately the same way as far as I can tell from looking through the computed styles. But, for whatever reason, once the container is a div the contained divs rendered with their proper dimensions which allowed the rest of my code to work properly. I didn't even have to change the attached CSS!
As the main goal of this project was to finish and make the customer happy, I didn't experiment beyond this finding.
I welcome theories on why this would be.
Thanks again.
Clif