Question
Can a Chrome extension add a "sub-tab" to a Chrome tab like the one that is created with Chrome DevTools (Inspect)?
Background
I currently am adding a div to the side of a window from my extension by taking an HTML file, sidebar.html, that contains the following code:
<style>
#comment_container {
float: left;
width: 30%;
position: fixed;
top: 0;
height: 100%;
background-color: #aabcff;
opacity: 0.9;
}
</style>
<div id="comment_container">
<div>
<p>...</p>
</div>
</div>
After a series of functions, sidebar.html is stored in a javascript variable sidebar. I then call
$( "body" ).wrapInner( "<div id='outerDiv'></div>");
$( "#outerDiv" ).width("70%");
$( "body" ).append(sidebar);
This appends a sidebar to the side of the window. What I would like to do is, instead of appending #comment_container to the document, to create a "sub-tab" like Chrome's DevTools (Inspect).
Related
I'm trying to do an if else statement for displaying one div or the other based on url but it's not working at all only one div constantly displays:
Div 1 is the only one that keeps showing, I've tried numerous work-arounds:
<script>
if (window.location.href.indexOf("pink") > -1)
{
document.getElementById("div2").style.display="none";
}
else {
document.getElementById("div1").style.display="none";
}
</script>
<div id= "div2">
<a id="link2" href="https://example2" target="_top"></a>
</div>
<div id= "div1">
<a id="link1" href="https://example1" target="_top"></a>
</div>
<style>
#link2
{
background: url(http://examplemy.com/wp-content/backtwo.PNG);
background-repeat: no-repeat;
background-size:cover;
}
#link1
{
background: url(http://examplemy.com/wp-content/backone.PNG);
background-repeat: no-repeat;
background-size:cover;
}
html, body {width: 100%; height: 100%; margin: 0;}
I've now put the script at the end but still not working.
Also, take my sites usr as examplemy/pink
The script is running before the divs are loaded. It won't be able to find them; you'll probably see errors in your development console if you open it when loading this page. You should either move the script below the divs, or put the code in an event handler for the load event of the window (window.addEventListener('load', function() { ... })) so that it won't run until the divs have loaded. (You can also use the DOMContentLoaded event instead of the plain load event for this case, though that's less well-known.)
I want to check if our advertisement(picture or flash) has successfully displayed on website page.But the element can not be found in page source.
I get the element in chrome Developer tools.
<div id="QQcom_all_Rectangle:1" data-loc="QQcom_all_Rectangle" data-index="1" style="height: 250px; display: block; width: 300px; position: relative;" class="l_qq_com" adconfig_lview="l.qq.com" adconfig_charset="gbk" adconfig_lview_template="http://l.qq.com/lview?c=www&loc={loc}" oid="1800716433" display="banner">
<a class="absolute a_cover" href="http://c.l.qq.com/lclick?loc=QQcom_all_Rectangle&click_data=dXNlcl9pbmZvPW9CM2pnVGd4RnhHNyZhZHhfZXh0PSZwY3RyPTUwMSZhdmVyPTUwMTIwMSZwcmk9eHRiQkZXc0ovclloYXdzdWZqRmpSTkhyZWFuL3pQU2omYnRwcmk9R3VBL25heHhnY3JyNTdrdVNCNW4yWis3TlJqM01nTmw=&oid=1800716433&soid=gmLndBibVj/1bQtQRjKVNkVKAV1Q&dtype=0&pctr=501&aver=501201&btoid=100418428&pri=xtbBFWsJ/rYhawsufjFjRNHrean/zPSj&btpri=GuA/naxxgcrr57kuSB5n2Z+7NRj3MgNl&index=1&page_type=2&chl=703&k=%E6%9B%9D%E7%81%AB%E7%AE%AD%E5%B7%B2%E8%A3%81%E6%8E%89%E6%B5%B7%E8%80%B6%E6%96%AF%20%E5%9B%9E%E5%BD%92%E4%BC%91%E5%9F%8E%E4%BB%85%E4%B8%80%E5%91%A8%E5%BE%81%E6%88%982%E5%9C%BA%2C%E6%B5%B7%E8%80%B6%E6%96%AF%2C%E7%81%AB%E7%AE%AD%2CNBA&t=%E6%9B%9D%E7%81%AB%E7%AE%AD%E5%B7%B2%E8%A3%81%E6%8E%89%E6%B5%B7%E8%80%B6%E6%96%AF%20%E5%9B%9E%E5%BD%92%E4%BC%91%E5%9F%8E%E4%BB%85%E4%B8%80%E5%91%A8%E5%BE%81%E6%88%982%E5%9C%BA_&r=&s=" target="_blank" rel="nofollow" style="position:absolute;width:300px;height:250px;left:0px;top:0px;cursor:pointer;z-index:10;background-color:#fff;filter:alpha(opacity=0);opacity:0;"></a>
<div class="absolute" style="position: absolute; width: 24px; height: 16px; left: 26px; bottom: 0px; cursor: pointer; display: none; z-index: 20; background: url(http://ra.gtimg.com/web/res/icon/report_default_new.png) 50% 0% no-repeat;"></div>
<div style="position: absolute; left: 0px; bottom: 0px; width: 26px; height: 16px; z-index: 12; background: url(http://ra.gtimg.com/web/res/icon/leftbottom_new.png) 100% 0% no-repeat;"></div>
<div class="absolute" style="position:absolute;width:18px;height:18px;right:0px;bottom:0px;cursor:pointer;z-index:20;background:url(http://ra.gtimg.com/web/privacy/white_icon.png) no-repeat;"></div>
</div>
but in page source,it only shows
<!--$loc$_div AD begin...."l=$loc$&log=off"--><div id="QQcom_all_Rectangle:1" data-loc="QQcom_all_Rectangle" data-index="1" style="height:0;" class="l_qq_com"></div><!--$loc$ AD end --><!--[if !IE]>|xGv00|c5668531d36ed7899852180841ca2aa2<![endif]-->
how can I get the 300px_250px image url?
anyone knows?
Yeah! That's simply because of the fact that there are DOM manipulation libraries which alter the Document-Object Markup and not the source.
You have to understand the difference between the DOM and the physical page source. The physical page source helps render the DOM, after which it can be modified by using libraries; since you can't change the source on the server side as it needs to be re-rendered for different people, only the DOM is changed. In very simple words, DOM is what the browser has rendered: it's like a copy of the source which has been, then, modified by the libraries.
Using a library like jQuery can do this easily.
var $element = $( "#QQcom_all_Rectangle:1" );
if ( !$element || $element === null ) {
console.log( "The element hasn't been rendered. Not found.");
}
But if it is not YOUR page, and you can't really modify it and/or get the data. You can try doing this with a web-kit emulator like PhantomJS or Selenium web-kit. Since these are just testing frameworks, you can't create a fully fledged JavaScript applications.
Theoretically, you can:
Render this in a WebKit (Browser Rendering Component)
Get the source of the DOM
Use it
But that's just in theory because you need to use some language to create an application like that and since it's outside the scope of your question, you can't.
Using selenium webdriver can handle this.
WebElement QQcom_all_Rectangle=driver.findElement(By.id("QQcom_all_Rectangle:1"));
List<WebElement> links=QQcom_all_Rectangle.findElements(By.tagName("a"));
String style=links.get(0).getAttribute("style");
I am trying to use jScrollPane to scroll through my gallery that is inside of an iframe. I am using the jQuery code for iframe scrolling from the official example.
Using this code doesn't work for my images (it just hides the original browser scrollbars, doesn't throw any errors and refuses to scroll), but it works perfectly if I replace my images with multiple paragraphs so they overflow (just like in the example).
EDIT: I forgot to mention that images scroll perfectly using the default browser scrollbar.
EDIT #2: Made a JSFiddle.
Here's how my gallery is structured:
...
</head>
<body>
<div id="content"> // Used the same way as in the example, works with text
<div class="gallery">
<div class='picture'>
<img class='pin' src='something'/>
<div class='wrapper'>
<img class='thumbnail' src='something'/>
<img class='border' src='something' />
</div>
</div>
<div class='picture'>
...
</div>
</div>
</div>
...
And here's the CSS for gallery and pictures:
.gallery {
position: relative;
width: 98%;
}
.picture {
float: left;
position: relative;
display: list-item;
list-style-type: none;
width: 11%;
}
.picture .pin {
position: absolute;
left: 48%;
width: 13%;
}
.picture .thumbnail {
position: absolute;
width: 89%;
margin-top: 19%;
}
.picture .border {
position: absolute;
width: 100%;
}
I ignored margins and some other irrelevant stuff, but you get the idea.
The jQuery code is exactly the same as presented in the example.
I think the problem is that images are loaded after scrollbar is initialized, and scrollbar does not detect container size changes by default. If you read documentation carefully, you can see next:
Demo showing how autoReinitialise can also be used so that content
with images in it displays correctly in jScrollPane
So, try autoReinitialise option. If it won't help - update your question with example of your iframe on jsFiddle.net
Solved it!
Apparently, the script didn't like the absolute position of my .picture .pin. Changing it to relative and restyling a bit solved my issue.
Updated JSFiddle
I am reloading the div every 10 seconds without reloading the whole page. And also when refresh happens, it greys out my div and show the refresh image and after refresh is done, it loads the data in my div table and it is working fine.
Below is the refresh image I am using -
.
Problem Statement:-
Below is my JSP file (dataInfo.jsp) and I am reloading the div container every 10 seconds without reloading the full page.
<body>
<div id='headerDivDash'>
<h1 id='topHeaderDash'>
<!-- some image here -->
</h1>
</div>
<div id="vertical-list" style='display: block; list-style-type: none;'>
<ul class="resp-tabs-list">
<li>Test 1</li>
<br />
<li>Test 2</li>
</ul>
</div>
<!-- just need to reload this div, other div should be intact without getting appended -->
<div class="container">
</div>
<div class="footer">Some Value Here</div>
</body>
Now below is the jquery script I am using to load the div container every 10 seconds and it works fine. I am able to see the refresh image and it also greys out so everything is working good so far.
// Create a refresh function:
function refresh(){
// SHOW overlay
$('#overlay').show();
// Retrieve data:
$.ajax({
url: 'dataInfo.jsp',
type: 'GET',
success: function(data){
// onSuccess take only the container content
var content = $($.parseHTML(data)).filter(".container");
//Replace content inside the div
$('.container').replaceWith(content);
// HIDE the overlay:
$('#overlay').hide();
}
});
}
$(document).ready(function(){
// Create overlay and append to body:
$('<div id="overlay"/>').css({
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: $(window).height() + 'px',
opacity:0.4,
background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
}).hide().appendTo('body');
// Execute refresh with interval:
setInterval(refresh, 1 * 1000);
});
Now as you see above, I have hardcoded the url for image. If I deploy my code in the production, then it will block this url because of firewall so somehow I need to load this image from my local folder in the project.
My directory structure is like this -
webapp/
|-- resources/
| +-- img/
| page-loader.gif
+- WEB-INF/
+-- views/
dataInfo.jsp
I tried using the path like this background: 'lightgray url("/testweb/src/main/webapp/resources/img/page-loader.gif") no-repeat center' it doesn't work that way also somehow.
So my question is - Is there any way I can rewrite the overlay div in my above jquery in the body of html somehow? Then I can use image tag which will work for me for sure.
<img src="page-loader.gif" />
As far as I see, the image should be placed in the center of the screen. This could be done by using an outer div for background and center the image inside it.
Add both div and img tag to the end of the body tag so:
<div class="footer">Some Value Here</div>
<div id="overlay" style="display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: lightgray; opacity: 0.4; ">
<img src="page-loader.gif" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;" />
</div>
</body>
The style attribute can be moved to a separate css file and replaced by the class attribute.
The $(document).ready code can be reduced so:
$(document).ready(function(){
// Execute refresh with interval:
setInterval(refresh, 1 * 1000);
});
Are you sure about your directory structure. I am presuming you are working with Java/JSP spring? and not Javascript!
I believe the Resource folder is one up from the web app folder and web app is your root. Have you tried url(/img/page-loader.gif)?
I was just going through this beautiful website. Can anybody tell me how that designer has shown "The magic is loading" thing :
http://danielhellier.com/showcase/danielhellier/
The image just disappears as soon as the site is loaded complelely.
He is using javascript.
Look at the file http://danielhellier.com/showcase/danielhellier/js/jquery.bits.js
in the first line he fades out the loading div once the site has loaded:
$(window).load(function () {
$('#loading').fadeOut('slow');
});
The loading div:
<div id="loading">
<div align="center">
<p>The magic is loading</p>
<img src="img/loader.gif" alt="Loader" />
</div>
</div>
The CSS for the loading div:
#loading {
background: none repeat scroll 0 0 #1E1E1E;
color: #FFFFFF;
cursor: wait;
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 100;
}
Notice how the z-index is high to put it on top of everything and the height and width are 100% to make it take up the entire window with its opaque background.
Also he put that <div> before the rest of the HTML. So it will be loaded first and the JavaScript to remove it is triggered by the load event on the window which will not be triggered until everything has loaded.
A very nice effect.