As I try to modify content in the html panel in firebug the focus goes elsewhere and I have to click & type very quickly before it goes again.
If I press break on mutate, the focus does not wander, but then it breaks on mutate...
Is there an option I have enabled that is causing this?
I had this issue too. On the HTML tab there is a drop-down arrow. Click on it and unselect the option, "Scroll Changes Into View". If you are on a webpage that actively tracks the mouse or has constant javascript going on, it is very likely that this is the culprit.
I don't know about an option but it sounds like some script is writing to the page and interfering with your ability to edit. But checking that, my firebug lets me edit even the field that is being modified.
This is Firebug 1.8.4 on firefox 8
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
setInterval(function(){
$('body').addClass('xx'+Math.floor(Math.random()*100));
},2000);
});
</script>
</head>
<body>
</body>
</html>
Related
I wish to generate a download link button with user input replacing certain text in the link it's self.
http://linkhere/folder/foder/folder/InvoiceEnquiry.action?getPDF=&invoiceNumber=(User input result placed here)&criteria.invoiceType=INVOICE
Is this possible. I can use html code to get to the userinput but not to place the final part of the link after it prior to clicking the download button.
HTML Codes online
Form Builder
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.location.replace("First part of link"+inputvalue");
});
});
</script>
</head>
<body>
<input type="text" value="002" id="input">
<button type="button" id="button">Click Me!</button>
</body>
</html>
Generated full download link with the users input and the extension of the link placed afterwards to have a complete download link
First off, you don't need JQuery for this. Vanilla JS would work fine. Just wrap the redirect in a function and call the function with the HTML "onclick" attribute on the button element. Then you can get rid of the JQuery script, unless something else needs it.
Secondly the replace() method takes two arguments. You're giving it one concatenated string (the + operator used in this way is for combining strings).
window.location.replace("(User input result placed here)", inputvalue");
That will work if (User input result placed here) doesn't change.
I'm working on an existing page. And there's a button on the page. It's like:
<html>
<script src="..."></script>
...
<div><input>...</input></div>
</html>
After click the button, a pop up dialog page(it's a fully functional page, not just displaying some messages) will show. It's like:
<html>
<script src="..."></script>
...
<div><input>...</input></div>
<div>
<iframe>
<html>
<script src="..."></script>
<form>
...
</form>
</html>
</iframe>
</div>
</html>
In the new page, I have to load all the necessary script again which takes a lot of time.
My question is:
I'm doubtful about this kind of implementation, can someone comment on this?
what's the best practice for this kind of scenario(open a new dialog page)?
I'm building a course site for my students, with different 'chapters' accessed from different links. I would like to be able to have two or more popups of the same page so I can view different parts of the same chapter side by side. Is this possible in highslide (I don't think it is...). Any solution, using highslide or not, would be appreciated!
Here's a jsfiddle demo that lets you open multiple HTML popups. In this case, both links are opening the same page of stuff, but that's just to keep the demo setup simple - normally you would have each link opening a different iframed page, but for your specific requirement, I guess you'd be opening the same page twice, just like this demo. Open the first link, then drag it by the header to one side, and open the second link.
http://jsfiddle.net/MisterNeutron/Qk6U6/1/
The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo by MisterNeutron</title>
<script type='text/javascript' src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<script type='text/javascript'>
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script>
</head>
<body>
<div>
<a id="thumb1" href="http://highslide.com/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">First iframe</a>
<br><br>
<a id="thumb2" href="http://highslide.com/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">Second iframe</a>
</div>
</body>
</html>
I have used Dreamweavers menues to do give my site a dropdown list that I can then edit. Perhaps "open in new window" when you click the link will work. I have found that most clicks will default to open in the same window.
When I have a simple HTML markup like this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
</head>
<body>
</body>
</html>
When viewing the elements of the document, in the Chrome Deceloper Tool(F12) it looks likes this:
<!DOCTYPE html>
<html>
<head>
<title>lawl</title>
<style type="text/css"></style> <-- what the?
</head>
<body>
</body>
</html>
So, my question goes: Where does the style tag come from? What added it, and why?
Hope you guys can clear this up for us, it's been quite the subject the last 10 minutes in class ;-). Also worth mentioning; a class got added to a empty div in another document when the teacher tried it.
Edited title.
Chrome plugins can get access to your DOM, and so does the development tools. In this particular case, I think the development tools is the one to blame.
The empty style tag is probably a placeholder for injected CSS.
If you open the source code (view-source:www.example.com), you will see that your DOM is perfectly fine.
99:1 that the <style> element is a stylesheet injected by your AdBlock (or similar) extension.
Lets take a static html page as a scenario, lets say you have a DIV element that you wish to only render fully within a users browser AFTER all its content has already been fully loaded instead of having bits and pieces of it appear. Any ideas appreciated! thanks
Hide the DIVs and show them with JavaScript when onload fires. E.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function showHidden() {
document.getElementById("cantseeme").style.display='block'; // Show it
}
</script>
</head>
<body onload="showHidden();">
<div id="cantseeme" style="display:none;">Hidden element</div>
</body>
</html>
I would use jQuery, the DIV would have a style of display:none, and my body onLoad function would set the display to block.
trigger your code after the dom ready event. Link here for more details.