Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Before function is called
After function is called
Hey guys!
I have this weird behavior of a div element that holds text generated by a function.
Basically if you take a look at 1, empty div element is displayed that should be hidden until button is pressed.
If you take a look at 2, you can see how does it look when button is pressed.
I am not sure how to remove the white block div from showing up until user clicks on a button?
Any help will be appreciated!
Thank you!
document.getElementById("div-class").style.display = "none";
you can manipulate dom elements via your javascript code. try to set display none.
Add a class of hidden to that div, and in css:
.hidden{
display:none;
}
then on button click, remove that class.
document.getElementById('yourButton').addEventListener(function(e){
// other lines
document.getElementById('thatdiv').classList.remove('hidden');
});
let quotes = [
'The best thing about a boolean is even if you are wrong, you are only off by a bit. (Anonymous)',
'Without requirements or design, programming is the art of adding bugs to an empty text file. (Louis Srygley)',
'Before software can be reusable it first has to be usable. (Ralph Johnson)',
'The best method for accelerating a computer is the one that boosts it by 9.8 m/s2. (Anonymous)',
'I think Microsoft named .Net so it wouldn’t show up in a Unix directory listing. (Oktal)',
'If builders built buildings the way programmers wrote programs, then the first woodpecker that came along would destroy civilization. (Gerald Weinberg)',
'There are two ways to write error-free programs; only the third one works. (Alan J. Perlis)',
'Ready, fire, aim: the fast approach to software development. Ready, aim, aim, aim, aim: the slow approach to software development. (Anonymous)',
'It’s not a bug – it’s an undocumented feature. (Anonymous)',
'One man’s crappy software is another man’s full-time job. (Jessica Gaston)',
'A good programmer is someone who always looks both ways before crossing a one-way street. (Doug Linder)',
'Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. (Martin Golding)',
'Programming is like sex. One mistake and you have to support it for the rest of your life. (Michael Sinz)',
'Deleted code is debugged code. (Jeff Sickel)',
'Walking on water and developing software from a specification are easy if both are frozen. (Edward V Berard)',
'If debugging is the process of removing software bugs, then programming must be the process of putting them in. (Edsger Dijkstra)',
'Software undergoes beta testing shortly before it’s released. Beta is Latin for “still doesn’t work. (Anonymous)',
'Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the universe trying to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)',
'It’s a curious thing about our industry: not only do we not learn from our mistakes, but we also don’t learn from our successes. (Keith Braithwaite)',
'There are only two kinds of programming languages: those people always bitch about and those nobody uses. (Bjarne Stroustrup)',
'In order to understand recursion, one must first understand recursion. (Anonymous)',
'The cheapest, fastest, and most reliable components are those that aren’t there. (Gordon Bell)',
'The best performance improvement is the transition from the nonworking state to the working state. (J. Osterhout)',
'The trouble with programmers is that you can never tell what a programmer is doing until it’s too late. (Seymour Cray)',
'Don’t worry if it doesn’t work right. If everything did, you’d be out of a job. (Mosher’s Law of Software Engineering)'
];
function genQuote() {
// Selecing an element from HTML
let quote = document.querySelector('#quote-content');
// Creating an indexQ of a random number
// And floor it between 0 to length of quotes[]
let indexQ = Math.floor(Math.random() * quotes.length);
// Display the quote of that index
quote.innerHTML = quotes[indexQ];
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
text-decoration: none;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
background-size: cover;
background-attachment: fixed;
overflow: hidden;
}
#quote-content {
font-size: 22px;
}
.btn {
background: url(/img/favicon1.png) no-repeat;
border: none;
width: 102px;
height: 100px;
outline: none;
transition: 400ms;
}
.btn:active {
opacity: .2;
}
.card {
padding: 15px 30px 15px 30px;
margin: 20px auto;
max-width: 500px;
max-height: 300px;
background-color: #f2e6ff;
border-radius: 8px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.card>h2 {
color: #ffeeee;
padding: 15px;
font-size: 28px;
background-color: #5390d9;
font-family: arial;
text-align: center;
border-radius: 5px;
box-shadow: 4px 4px #023e8a;
}
.card>p {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 400;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#600&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="img/quotes.png">
<title>Coding Quotes</title>
</head>
<body>
<div class="container">
<div class="card">
<h2>Random quote</h2>
<p>Generate random quote!</p>
<button onclick="genQuote()" class="btn"></button>
</div>
<div id="quote-content" class="card"></div>
</div>
<script src="main.js"></script>
</body>
</html>
Somebody mentioned that this happens because div (class="card") has a padding in CSS.
I've tested removing the padding and it actually does the trick however, it kinda ruins the way card looks.
I have attached the code so if anybody has any tip/advice, I'm open to it! :)
Related
As the title explains, for some reason document.execCommand('heading', false, 'h1') (or any other heading size) does not work. However, other commands such as 'bold', 'link', et cetera, do work.
I am looking at caniuse and it seems to be supported across the board while there are "0 known issues."
Below is the code I am using. Notably, I tried embedding a demo and even creating a codepen, but for some reason none the of the commands work in either.
const formatToolClass = document.getElementsByClassName('format-tool')
const preventDefault = (e) => e.preventDefault()
const applyStyle = function(){
document.designMode = 'on'
document.execCommand('heading', false, 'h1') // does not work
document.execCommand('bold', false, null) // will work
document.designMode = 'off'
}
for (let i = 0; i < formatToolClass.length; i++){
formatToolClass[i].addEventListener('mousedown', preventDefault)
formatToolClass[i].addEventListener('click', applyStyle)
}
Any idea what is going on??
P.S. Below is the HTML and CSS in case you want to mess around with it in a browser.
<!DOCTYPE html>
<head>
<title>Is required and cannot be empty.</title>
<meta charset="UTF-8">\
<link rel="stylesheet" href="css/write.css">
</head>
<body>
<div id="controls">
<div class="controls format-tool" id="controls-embolden" data-xcom="bold">Embolden</div>
<div class="controls format-tool" id="controls-italicize" data-xcom="italic">Italicize</div>
<div class="controls format-tool" id="controls-heading" data-xcom="heading">Heading</div> <!---->
<div class="controls format-tool" id="controls-link" data-xcom="createLink">Link</div> <!---->
<div class="controls format-tool" id="controls-list" data-xcom="insertUnorderedList">List</div>
<div class="controls format-tool" id="controls-image" data-xcom="insertImage">Image</div> <!---->
<div class="controls" id="controls-shortcuts">Shortcuts</div>
<div class="controls" id="controls-save">Save</div>
<div class="controls" id="controls-publish">Publish</div>
</div>
<div id="user-input" contenteditable="true">
By portraying me in a sexual way to attendees, this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf organizers recognize how this gift could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with.
Not only is the photo itself problematic, but also the fact that ReactiveConf never asked for my consent. I was never informed that ReactiveConf was planning on altering my photo for the event, nor did I see the superhero picture until after day one of the conference had ended. None of the organizers explicitly asked for my permission to display the picture on the big screen. Had I presented my talk on day 1, I would have been completely blindsided as I walked on stage, which is what happened to a colleague of mine who was also unhappy with his picture.
Speaking at a conference is already a monumental investment of mental, emotional, and physical effort, right up until the plane ride home. The will to continue investing any more energy into an event whose organizers had showed so little consideration for their speakers vanished as soon as I received the gift. After consulting with trusted members of my team, I decided to withdraw and leave the situation immediately.
By portraying me in a sexual way to attendees, this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf organizers recognize how this gift could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with.
</div>
<script src="js/write.js"></script>
</body>
</html>
body {
width: 100vw;
height: 100vh;
overflow: hidden;
margin: 0;
}
#controls {
width: 100%;
height: 10%;
display: flex;
justify-content: space-around;
box-sizing:border-box;
border:solid red 1px;
}
.controls {
font-size: 1.5vmin;
display: flex;
justify-content: center;
align-items: flex-end;
box-sizing:border-box;
border:solid orange 1px;
}
#user-input {
width: 80%;
height: 90%;
max-width: 1440px;
padding: 1.25%;
overflow-y: visible;
overflow-x: hidden;
font-family: arial;
font-size: 3vmin;
color: #000;
box-sizing:border-box;
border:solid black 1px;
}
You are making a wrong assumption. The caniuse site states that execCommand is supported without issues, which is correct, but that doesn't mean that all the commands are supported. In fact, the caniuse page has a comment in the Notes section:
To determine what commands are supported, see Document.queryCommandSupported()
And if you check "heading", you'll see it is not supported in Chrome:
console.log(document.queryCommandSupported("heading"))
It is not supported on IE either. Firefox states that it supports it, but it may or may not be in the way you expect: instead of applying the heading styles to only the selected text, it applies it to the whole block (works like a "formatBlock" which makes sense as a heading is a block level element and not an inline element as a bold/italics would be).
If that works for you, there's a workaround that is using "formatBlock" as it is supported by Chrome, Firefox and IE:
console.log(document.queryCommandSupported("formatBlock"))
In that case, what you would do is setting the formatBlock to the heading you want (looks like an h1) and it will work:
const formatToolClass = document.getElementsByClassName('format-tool')
const preventDefault = (e) => e.preventDefault()
const applyStyle = function() {
document.designMode = 'on'
document.execCommand('formatBlock', false, 'h1')
document.designMode = 'off'
}
for (let i = 0; i < formatToolClass.length; i++) {
formatToolClass[i].addEventListener('mousedown', preventDefault)
formatToolClass[i].addEventListener('click', applyStyle)
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
margin: 0;
}
#controls {
width: 100%;
height: 10%;
display: flex;
justify-content: space-around;
box-sizing: border-box;
border: solid red 1px;
}
.controls {
font-size: 1.5vmin;
display: flex;
justify-content: center;
align-items: flex-end;
box-sizing: border-box;
border: solid orange 1px;
}
#user-input {
width: 80%;
height: 90%;
max-width: 1440px;
padding: 1.25%;
overflow-y: visible;
overflow-x: hidden;
font-family: arial;
font-size: 3vmin;
color: #000;
box-sizing: border-box;
border: solid black 1px;
}
<div id="controls">
<div class="controls format-tool" id="controls-embolden" data-xcom="bold">Embolden</div>
<div class="controls format-tool" id="controls-italicize" data-xcom="italic">Italicize</div>
<div class="controls format-tool" id="controls-heading" data-xcom="heading">Heading</div>
<!---->
<div class="controls format-tool" id="controls-link" data-xcom="createLink">Link</div>
<!---->
<div class="controls format-tool" id="controls-list" data-xcom="insertUnorderedList">List</div>
<div class="controls format-tool" id="controls-image" data-xcom="insertImage">Image</div>
<!---->
<div class="controls" id="controls-shortcuts">Shortcuts</div>
<div class="controls" id="controls-save">Save</div>
<div class="controls" id="controls-publish">Publish</div>
</div>
<div id="user-input" contenteditable="true">
By portraying me in a sexual way to attendees, this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf
organizers recognize how this gift could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with. Not only is the
photo itself problematic, but also the fact that ReactiveConf never asked for my consent. I was never informed that ReactiveConf was planning on altering my photo for the event, nor did I see the superhero picture until after day one of the conference
had ended. None of the organizers explicitly asked for my permission to display the picture on the big screen. Had I presented my talk on day 1, I would have been completely blindsided as I walked on stage, which is what happened to a colleague of mine
who was also unhappy with his picture. Speaking at a conference is already a monumental investment of mental, emotional, and physical effort, right up until the plane ride home. The will to continue investing any more energy into an event whose organizers
had showed so little consideration for their speakers vanished as soon as I received the gift. After consulting with trusted members of my team, I decided to withdraw and leave the situation immediately. By portraying me in a sexual way to attendees,
this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf organizers recognize how this gift
could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with.
</div>
Now, if you want only the text that you selected to be an H1, then you could do a trick: use "insertHTML" to add the tags <h1> and </h1> surrounding the selected text (it will work on Edge, but not on Internet Explorer). Something like this:
const formatToolClass = document.getElementsByClassName('format-tool')
const preventDefault = (e) => e.preventDefault()
const applyStyle = function() {
document.designMode = 'on'
document.execCommand('insertHTML', false, '<h1>' + window.getSelection().toString() + '</h1>')
document.designMode = 'off'
}
for (let i = 0; i < formatToolClass.length; i++) {
formatToolClass[i].addEventListener('mousedown', preventDefault)
formatToolClass[i].addEventListener('click', applyStyle)
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
margin: 0;
}
#controls {
width: 100%;
height: 10%;
display: flex;
justify-content: space-around;
box-sizing: border-box;
border: solid red 1px;
}
.controls {
font-size: 1.5vmin;
display: flex;
justify-content: center;
align-items: flex-end;
box-sizing: border-box;
border: solid orange 1px;
}
#user-input {
width: 80%;
height: 90%;
max-width: 1440px;
padding: 1.25%;
overflow-y: visible;
overflow-x: hidden;
font-family: arial;
font-size: 3vmin;
color: #000;
box-sizing: border-box;
border: solid black 1px;
}
<div id="controls">
<div class="controls format-tool" id="controls-embolden" data-xcom="bold">Embolden</div>
<div class="controls format-tool" id="controls-italicize" data-xcom="italic">Italicize</div>
<div class="controls format-tool" id="controls-heading" data-xcom="heading">Heading</div>
<!---->
<div class="controls format-tool" id="controls-link" data-xcom="createLink">Link</div>
<!---->
<div class="controls format-tool" id="controls-list" data-xcom="insertUnorderedList">List</div>
<div class="controls format-tool" id="controls-image" data-xcom="insertImage">Image</div>
<!---->
<div class="controls" id="controls-shortcuts">Shortcuts</div>
<div class="controls" id="controls-save">Save</div>
<div class="controls" id="controls-publish">Publish</div>
</div>
<div id="user-input" contenteditable="true">
By portraying me in a sexual way to attendees, this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf
organizers recognize how this gift could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with. Not only is the
photo itself problematic, but also the fact that ReactiveConf never asked for my consent. I was never informed that ReactiveConf was planning on altering my photo for the event, nor did I see the superhero picture until after day one of the conference
had ended. None of the organizers explicitly asked for my permission to display the picture on the big screen. Had I presented my talk on day 1, I would have been completely blindsided as I walked on stage, which is what happened to a colleague of mine
who was also unhappy with his picture. Speaking at a conference is already a monumental investment of mental, emotional, and physical effort, right up until the plane ride home. The will to continue investing any more energy into an event whose organizers
had showed so little consideration for their speakers vanished as soon as I received the gift. After consulting with trusted members of my team, I decided to withdraw and leave the situation immediately. By portraying me in a sexual way to attendees,
this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf organizers recognize how this gift
could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with.
</div>
I was wondering what this paragraph actually meant?
It is taken from a website for disadvantages about inline scripts
Poor accessibility : When it comes to inline JavaScript code, such as in
the above example, it’s applied to an element which doesn’t have any
built-in fallback interaction handler
Link: https://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/
<div style="width: 800px; margin: 1em auto; font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif">
<div style="float: left; width: 400px; padding: 1em 2em; font-size: 0.9em">
<span id="get-shit" onclick="callSomeFunction()">News</span>
</div>
</div>
He is saying that in above function if callSomeFunction, redirects a page to some other page... but for some reason(Due to network error it can't load) callSomeFunction isn't loaded in the page, then it will be a dead link which will do nothing, so rather it should be implemented in such a way that without javascript it should also work reasonably...
even browser provides a configuration to disable javascript for the user, so in that case above link will do nothing
So he is saying by using below code that,
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
<script type="text/javascript" src="js/base.js"></script>
<div id="container">
<div id="navigation">
<a id="get-news" href="news-proper-url">News</a>
</div>
</div>
/*
CSS code, in separate file (base.css)
*/
#container {
width: 800px;
margin: 1em auto:
font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif;
}
#navigation {
float: left;
width: 400px;
padding: 1em 2em;
font-size: 0.9em;
}
/*
JavaScript code, in separate file (base.js)
*/
window.onload = function () {
document.getElementById("get-news").onclick = function () {
// Get news through AJAX
};
}
Here, If javascript is not loaded then clicking on "News" will redirect you to the new page,
If javascript is loaded then he will send an AJAX request and load the news in the same page
Which are the cases on unavailability of javascript are listed in the same page
Doesn’t Everyone Have JavaScript Nowadays?
First: no they don’t. Second: some people purposely turn it off (for
instance, the NoScript Firefox extension has had 31 million downloads
to this date). Third, very often is not up to the end user, but
external circumstances that they don’t control, which will, to some
extent or another, lead to JavaScript being unavailable. These factors
are:
Antivirus programs and firewalls being a bit too harsh in their
JavaScript security judgement. Company proxy servers filtering out
code (for example, read An important lesson learned about AJAX and
accessibility). Other company internet access settings preventing
proper JavaScript execution.
Example With Progressive Enhancement
Click me
Here, if the JavaScript fails, then the link works as normal and the important message is displayed by loading a new page from the server.
(If the JavaScript is successful the clicks default behaviour is canceled and the link isn't followed).
The built-in interaction handler of a link is "go to a URL". By layering JavaScript over it we can use that as a fallback.
Example Without Progressive Enhancement
<button type="button" onclick="alert('Important message');">Click me</a>
Here, if the JavaScript fails, then nothing happens at all. It's just a button that doesn't do anything.
This doesn't actually have anything to do with the JavaScript being inline. The same issues occur with modern JavaScript loaded from script elements and bound with addEventListener.
I'm building a Chrome Extension, where in, based on the search query I want to display some stuff(let's assume links for now) on the RHS of the Google results page. Very similar to what Wajam does.
I understand I need to use Content-Scripts for such tasks, which is clear and fine.
The problem is, Google seems to return divs with different IDs each time based on the query in its html. For instance if you search for a movie name, there seems to be different set of IDs in the html as opposed to, let's say when you search for a Javascript error message.
I wonder how Wajam has implemented its plugin, which works so reliably and displays links on the RHS.
How should I go about it? Any specific IDs you can see in the html that I can use or build upon reliably?
Just to be clear for folks who are not into Chrome Extensions, the question doesn't require knowledge of Extension architecture/APIs. It's a seemingly simple html/javascript/css related question.
I don't know anything about Chrome Extensions developement, but I tried to understand Google results page structure, and I hope that will help you :
Every google result page has a #rhs div, even if there are no additional informations on the right. This div has an unique id, so I think it would be easy to put dynamical content inside.
I've tried with Web Developer Tools, and that worked very well :
I think you'll just have to append content to this div to get what you want : the "different IDs based on the query" may be children of this parent and unique #rhs div. So I don't think you have to care about these children "random id" divs, just append your content (custom css, images, videos...) in this #rhs div :)
if you want to try with a Web Developer Tool :
just paste this code instead of the original <div id="rhs">...</div>
<div id="rhs" style="
border: 2px solid red;
padding: 16px;">
Put whatever you want here
<div style="
font-weight: 700;
padding: 12px;
border: 1px solid #aaa;
background-color: #eee;
margin: 20px;
-webkit-box-shadow:0 1px 2px rgba(34,25,25,0.4);
-moz-box-shadow:0 1px 2px rgba(34,25,25,0.4);
box-shadow:0 1px 2px rgba(34,25,25,0.4);
font-size: 1.4em;
">
Custom CSS
</div>
<img src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png"> images
<iframe id="ytplayer" type="text/html" width="340" height="390" src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=0&origin=http://example.com" frameborder="0"></iframe>
</div>
and you'll get the same result as me.
Hope I helped you ! :)
I am working on an existing fixed-width desktop site, and the client wants no changes to the existing desktop layout whatsoever, and they want it to be "responsive".
The Problem:
When viewed on a phone (my android, anyhow), the 'mobile' site loads as expected. However, if you touch, move, scroll, etc, or happen to "zoom out", there is a huge amount of whitespace like this:
Background:
For the record: The new specs for the "mobile" view contains some new content, new menu options, etc., which don't always correlate consistently with the existing content.
So, my approach has been to add a css class to elements I want to keep, then use jQuery.clone(), .append(), and appendTo() to re-use as much of the existing content as possible, moving elements into my new "mobile scaffold":
$('.mobile-header').appendTo($('#PH_mobile_header'));
$('.mobile-content').appendTo($('#PH_mobile_content'));
$('.mobile-footer').appendTo($('#PH_mobile_footer'));
The simplified scaffold:
<div id= "PH_mobile_wrapper" class="mobile-wrapper mobile visible-xs">
<div class="row row-offcanvas row-offcanvas-left">
<div id="main" class= "col-xs-12">
<div id="PH_mobile_header" class="visible-xs">
<!-- HEADER -->
</div>
<div id="PH_mobile_content" class="container visible-xs">
<!-- CONTENT -->
</div>
<div id="PH_mobile_footer" class="visible-xs">
<!-- FOOTER -->
</div>
</div>
</div>
</div>
I also rely on 2 sections of a new LESS stylesheet to tweak a few things. For example:
//DESKTOP:
#media(min-width:768px){
h1{
font-size: 2em !important;
}
body{
background-color: #ltgrey;
}
.navbar{
width:1000px;
margin: auto;
border-right: solid black 1px;
}
.mobile{
display: none;
}
}
//MOBILE:
#media(max-width:768px){
li.inverse{
background-color: #dkgrey;
color: white;
a{
color: white;
&:hover, &:focus{
background-color: #olacred;
}
}
}
}
For the record, I'm using bootstrap 3.0 and php if that's relevant. I just mention that in case bootstrap is related to this somehow.
I started with the standard
<meta name="viewport" content="width=device-width, initial-scale=1">
and i've tried
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,maximum-scale=1">
Also read about CSS #viewport, but it doesn't seem to do the trick either.
I've even tried explicitly doing this at the end of my stylesheet:
#layout_wrapper, #layout_container,.dashboard_home_highlights,
.collapse-wrapper,#alpha,#beta,.dashboard_col_1_rotonator,
.orbit > a > img, .orbit > a{
// display: none !important;
max-width:300px !important;
}
blah.
So the questions are:
a. How do I fix this "viewport" issue, and b. is this all-around approach OK?
EDIT: Here is a partial demo: http://myapp.gristech.com/demo/viewport
Grrr...I have failed to completely reproduce the entire problem, but here you can see the approach, and one bug: if you pull this up on a phone, then zoom in, the text correctly squeezes into the view. Then, zoom back out... the text does NOT expand again as it should, leaving extra whitespace so to speak, and scrolling down is thereafter "wobblely". This is kind of what I think is going on on a larger scale in the full project- since the 1000px site loads 'first', then the 'layout viewport' is still 1000px. thank you so much for your time & effort
Hello again dearest Experts,
I am still having issues getting tooltips to work correctly.
The code below works correctly as far displaying the tooltips.
The big issue is that it expands the textbox, making other textboxes lose alignment.
What we would like to is to have the message in the tooltop hover on top of the textbox but not obscure it. This way, users can still type into it.
Can the code I have below be modified to help me accomplish this?
Many thanks.
THe css
<style type="text/css">
div.activeToolTip
{
display:block;
visibility:visible;
background-color:#A1D40A;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.75em;
line-height: 1.50em;
font-weight:bold;
color: #fff;
border:1px solid black;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
width:200px;
height:70px;
}
div.idleToolTip
{
display:none;
visibility:hidden;
}
Then textbox and tooltip.
<asp:TableCell><asp:TextBox ID="instruct" onmouseover="document.getElementById('toolTipDiv').className='activeToolTip'" onmouseout="document.getElementById('toolTipDiv').className='idleToolTip'" runat="server" Width="75px"></asp:TextBox>
<div id="toolTipDiv" class="idleToolTip">My instructions go here.</div>
The key is to make your tooltip position: absolute. This way you'll have exact control over where it appears and it won't affect the layout of any other elements.
The other thing you should do it put it in an element with position: relative set:
<div class="relative">
<input type="text" />
<div id="toolTipDiv" class="idleToolTip">My instructions go here.</div>
</div>
This will create the coordinate system for it (i.e.: bottom: 20px will translate to 20px from the bottom of the relative parent):
.relative {
position: relative;
}
#toolTipDiv {
position: absolute;
bottom: 20px;
left: 0;
}
Here's a demo of it in action.
I recommend you use a jQuery plugin, there are tons of them:
30 Stylish jQuery Tooltip Plugins For Catchy Designs
edit: sorry, that was a complete brain fart. I need more sleep. display:absolute won't do anything, it's position:absolute
Can you show the problem in the jsfiddle?