I have tried this using the page sources but in the page source. The div tag i want is absent.
<div class="city-banner autumn livebox globalEvents">
<div class="cloud-3 content">
<div class="cloud-2">
<div class="cloud-1">
<div class="plane-left">
<div class="plane-right">
<div class="city">
<div class="ship left-course">
<div class="yacht">
<div class="precipitation">
<div class="lightning-1"></div>
<div class="lightning-2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
while going through the Developer tools in chrom is was able to find the div i needed and (after i paused in debugger) then i could find the text i needed aswell.
<div class="bubble" style="margin-left: 537px; margin-top: 63px;"><div class="bubble-inner"><div class="bubble-text">barradell12 attacked ChaosViper</div></div><div class="bubble-tail"></div></div><div class="bubble" style="margin-left: 181px; margin-top: 113px;"><div class="bubble-inner"><div class="bubble-text">Nahid7 attacked FHC</div></div><div class="bubble-tail"></div></div><div class="bubble" style="margin-left: 1183px; margin-top: 7px;"><div class="bubble-inner"><div class="bubble-text">lol</div></div><div class="bubble-tail"></div></div><div class="bubble" style="margin-left: 615px; margin-top: 8px; opacity: 0.684062276342339;"><div class="bubble-inner"><div class="bubble-text">barradell12 mugged ChaosViper</div></div><div class="bubble-tail"></div></div><div class="bubble" style="margin-left: 283px; margin-top: 8px; opacity: 0.561107899969945;"><div class="bubble-inner"><div class="bubble-text">Someone mugged cheesejointsuk</div></div><div class="bubble-tail"></div></div><div class="bubble" style="display:none;"><div class="bubble-inner"><div class="bubble-text">rexxcii attacked black15</div></div><div class="bubble-tail"></div></div><div class="bubble" style="display:none;"><div class="bubble-inner"><div class="bubble-text">Someone hospitalized TheWalrus</div></div><div class="bubble-tail"></div></div></div>
</div>
Now ideally i would like the text like "xxxx attacked xxxx", "xxxxx hospitalized xxxxxx" to be pulled into a text file if possible.
P.s. the bubbles only last for a few seconds then they dissapear and more appear. So id like them all
Looks like you're trying to automate something for Torn?
The best and easiest way is to create some nice userscript with Javascript (maybe in combination with jQuery) and inject it in the page. This can be done with tools like Greasemonkey for firefox and Tampermonkey for chrome.
For the "how" to get it, query the path in a timer.
setTimeout(function(){
//Scan for popup
}, 1000);
On what the correct queries are; only one way to find out.
Related
I have 4 divs with a more-info button on the bottom of each, like so:
http://codepen.io/anon/pen/VpVbPq
And when a user presses ' more info ' I would like for it to extend to the bottom and show extra info, obviously.
The problem is under the more-info div, text is seen, but what if I want to hide whats under it, even if its opacity is 0.6 ?
I thought it would've been the best if I draw what I need, so here:
Codepen code below:
html
<body>
<div class="wrapper">
<div class="info">
<p>
dummy text
</p>
<div class="more-info">more info</div>
</div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
<div class="info"><div class="more-info">more info</div></div>
</div>
</body>
css
.wrapper {
width: 1045px;
margin: 0 auto;
}
.info {
width: 500px; height: 200px;
background-color: #1A5AB6;
display: inline-block;
margin: 10px;
position: relative;
font-size: 20px;
overflow: hidden;
}
.more-info {
width: 100%; height: 40px;
background-color: #0C1B44;
bottom: 0; left: 0;
display: inline-block;
position: absolute;
font-size: 20px;
color: white;
line-height: 35px;
text-align: center;
opacity: 0.6;
}
.more-info:hover {background-color: #010716;}
In order to have the text expand, you can use a little jQuery to set the height to automatically adapt to however much text there is, and hide the 'more info' button entirely:
$(".more-info").on("click", function() {
$(this).css("opacity", "0");
$(this).parent().css("height", "auto");
});
With regards to not having the text visible behind the 'more info' button, you would need to set the opacity to 1:
.more-info {
opacity: 1;
}
This naturally distorts the colour a little, but you can always change the background colour and hover colour to cover this.
I've created an updated pen showcasing this here.
Hope this helps! :)
change your class selector definition as shown below:
.more-info {
width: 100%; height: 20%;
background-color: #0C1B44;
font-size: 20px;
color: white;
display: block;
text-align: center;
opacity: 0.6;
}
Then add this css for your paragraph element:
p {
height: 75%;
overflow: hidden;
margin: 5px;
}
Your question: "what would be the best way to make a sort of drop-down-more-info div?"
There is a built in function in Boot Strap that allows you to use a "data" class that does all the crunching for you. Just call on their css and js files externally or host on your server. Familiarize yourself with their data classes and call on their css/js classes to simplify previously arduous coding, like revealing a hidden DIV on click!
Note the data-toggle="collapse" and data-target="#more_info" lines in my div that holds the span tag that is the control for revealing the hidden <div id="more_info">:
`<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>`
Then note the class in my hidden div. Note the id of the hidden div and the data-target #more_info. This can be used for classes as well, ie: .more_info. Everything is explained in more detail at bootstrap Github or their official site: http://getbootstrap.com/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="wrapper">
<div class="info">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>
<div id="more_info" class="collapse">Some hidden infomration you ony want to be seen when the user click on the control link.</div>
</div>
or add three divs floating perfectly without all the css, each with drop downs more info.
<body>
<div class="wrapper row">
<div class="col-md-4">
<p>
Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below.
</p>
<div data-toggle="collapse" data-target="#more_info">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span> </div>
<div id="more_info" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.
</div>
</div>
<div class="col-md-4">
<p>
Some other information we want to have a hidden drop down with more info for.
</p>
<div data-toggle="collapse" data-target="#more_info2">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info2" class="collapse">
Some hidden information you only want to be seen when the user click on the control link.</div>
</div>
<div class="col-md-4">
<p>
Yet another div with info that has a drop down menu for more info included below.
</p>
<div data-toggle="collapse" data-target="#more_info3">
<span class="glyphicon glyphicon-search"></span>
<span title="Click for more info">more info</span>
</div>
<div id="more_info3" class="collapse">
Some hidden infomration you ony want to be seen when the user click on the control link.
</div>
</div>
Best of luck.
A fellow web designer had dragged all of the HTML/CSS/JS from a Wix website to our normal website. Now the boss has asked me to do something, and I can't decipher this absolute brick of HTML. There's a position issue that makes it so if I add any text it smushes it all together.
I can fix the position issue with just a quick fix in Firebug, but if I go to edit the HTML I have no clue what the hell is going on.
Is there a way to wade my way through this?
Some of the "fun" HTML:
<div class="s45_border" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.0"></div>
<div style="height: 100%; z-index: 0;" data-gallery-id="comp-ihwc6mj1" id="comp-ihwc6mj1itemsContainer" class="s45itemsContainer" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.1">
<div data-image-index="0" data-displayer-width="1250" data-displayer-height="875" data-displayer-uri="90619a_86ac8e3a77144c20ba0d06e5d2df93ed.png" data-height-diff="0" data-width-diff="0" data-bottom-gap="0" data-image-wrapper-right="0" data-image-wrapper-left="0" data-image-wrapper-top="0" data-image-wrapper-bottom="0" data-margin-to-container="0" style="position: absolute; left: 0px; top: 0px; visibility: inherit; opacity: 1; height: 321px; width: 977px;" class="s45imageItem" data-state="notShowPanel desktopView unselected clipImage transIn normal noLink" id="comp-ihwc6mj1dataItem-ihwccgkv0" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.1.$2dataItem-ihwccgkv"><p></p>
<div style="height: 321px; width: 977px; margin: 0px;" id="comp-ihwc6mj1dataItem-ihwccgkv0imageWrapper" class="s45imageItemimageWrapper" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.1.$2dataItem-ihwccgkv.0">
<div style="cursor:default;" id="comp-ihwc6mj1dataItem-ihwccgkv0zoom" class="s45imageItemzoom" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.1.$2dataItem-ihwccgkv.0.0">
<div style="width:977px;height:321px;position:relative;overflow:hidden;" id="comp-ihwc6mj1dataItem-ihwccgkv0image" class="s45imageItemimage" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.1.$2dataItem-ihwccgkv.0.0.0">
<div class="s45imageItemimagepreloader" id="comp-ihwc6mj1dataItem-ihwccgkv0imagepreloader" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.1.$2dataItem-ihwccgkv.0.0.0.0"></div>
<p><img src="http://truespeed.ca/wp-content/uploads/2016/06/severroom.png" id="comp-ihwc6mj1dataItem-ihwccgkv0imageimage" alt="" style="width: 977px; height: 321px; object-fit: cover;" data-reactid=".0.$SITE_ROOT.$desktop_siteRoot.$PAGES_CONTAINER.1.1.$SITE_PAGES.$mainPage.1.$comp-ihwc6mj1.1.$2dataItem-ihwccgkv.0.0.0.$image"></p></div>
<p></p></div>
The funny looking things might come from "react" https://facebook.github.io/react/
You could look somewhere inside of the JavaScript files for the according "react-templates" which are actually responsible for the markup if you want to change something there.
But if it is just positioning, shouldn't some CSS changes do it?
Have you tried rules using "!important"?
I have some reveal slideshow that I need to convert to a single page html. I've used jQuery to strip the code of all the reveal.js added classes, javascript, and stylesheets. For some reason, when I resize the page, a style is added to the div that hides half the content.
My code before resizing:
<div id="body">
<div id="slides-body">
<section id="slide-Title">
<div id="div-Title">
<h2>
My Title
</h2>
<button id="button-Single-Page" style="padding-bottom: 5px" class="smallButton" onclick="singlepagehtmlformat()">Click here for the single page html version.</button>
</div>
</section>
</div>
</div>
My code after resizing:
<div id="body">
<div id="slides-body" style="width: 960px; height: 770px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.920625);">
<section id="slide-Title">
<div id="div-Title">
<h2>
My Title
</h2>
<button id="button-Single-Page" style="padding-bottom: 5px" class="smallButton" onclick="singlepagehtmlformat()">Click here for the single page html version.</button>
</div>
</section>
</div>
</div>
Why is this happening? How can I fix it?
That is not the default behavior, there must be a window resize event as pointed by #Bas Van Stein delegated in the code causing that.
To fix, it you can just remove the attr "style" from the target div.
<script>
$().ready(function(){
$( window ).resize(function() {
$("#slides-body").removeAttr("style");
});
});
</script>
Example : http://jsfiddle.net/mzg2zk48/2/
I am currently working with jsPlumb & got stuck at saving & loading the containers. I figured out how to save the endpoints, connections & positions.
But I can't figure out, how to save the div containers, including their attributes, children & the children's attrubites.
Here's a snippet of the containers, any ideas how to stringify them?
<div class="window main node ui-draggable _jsPlumb_endpoint_anchor_" id="maincontainer1" data-nodetype="main" style="left: 663px; top: 200px; width: 230px; height: 200px;">
<div class="ctrl_container">
<div class="button_rm">x</div>
</div>
<div class="layer" id="layercontainer1_1" style="height: 80px; width: 100%; background: none repeat scroll 0% 0% transparent;">
<div class="window filter node" style="left:25px; top:5px;" name="3#2#ABC#" id="filtercontainer2_1_1">
<div class="ctrl_container">
<a class="filter_caption edit" href="#">Edit</a>
<div class="button_rm">x</div>
</div>
<div class="details_container">
<span id="filter_label" class="filter_label jtextfill" style="font-size: 22px;">PrimarySupportGrp = 123</span>
</div>
</div>
</div>
<div class="layer" id="layercontainer1_2" style="height: 90px; width: 100%; background: none repeat scroll 0% 0% rgba(0, 255, 255, 0.4);"><div class="line-separator"></div>
<div class="window filter node" style="left:25px; top:5px;" name="5#4#Yes#" id="filtercontainer2_2_1">
<div class="ctrl_container">
<a class="filter_caption edit" href="#">Edit</a>
<div class="button_rm">x</div>
</div>
<div style="" class="details_container">
<span id="filter_label" class="filter_label jtextfill" style="font-size: 14px;"> Site > Yes</span>
</div>
</div>
</div>
</div>
I don't suggest saving the complete children hierarchy, but if you want - why not use .html()
var data = [];
$(".layer").each(function(){
var html = $(this).html();
data.push(html);
});
OR
Just save what is required to re-render them at the correct position - left, top etc.
for(var i=0 ; i<length; i++){
var layerTemplate = "...div template html goes here";
var $layerTemplate = $(layerTemplate);
$layerTemplate.css({top : data[i].top , left : data[i].left});
$("#maincontainer1").append($layerTemplate);
}
Some time back I wrote a script for saving & re-rendering jsPlumb - https://github.com/nitinsurana/jsPlumb-Persistence
I have a header that is aligned correctly when I view it offline, as well as online using Safari. When I view it online with chrome it is incorrectly aligned, but if I refresh the page it will then align properly.
Here is the url to the website to observe the issue yourselves: http://viscovisco.com/ (refresh browser to see it fix itself, the issue only seems to happen in chrome).
Also feel free to inspect element. Let me know if you need further information.
Here is the HTML code for the section that seems to be working improperly online:
<div class = "container">
<div id="box1">
<span id="firstname" onmouseover="nameToMatt()" onmouseout="defaultMode()">VISCO</span>
<span id="lastname" onmouseover="nameToLexi()" onmouseout="defaultMode()">VISCO</span>
<br>
<span id="information"></span>
<br>
Design & Programming
</div>
<div id="rightBoxes">
<div id="box2">
<i>Est.</i> 2014.
<br>
Based in SF Bay Area
</div>
<div id="box3">
<div class="letter"> L </div> 510 541 2464
<br>
<div class="letter"> M </div> 510 367 6435
</div>
<div id="box4">
Hallo!
<br>
projects#viscovisco.com
</div>
</div>
</div>
Here is the associated CSS:
.container {
font-family: "Times New Roman", Times, serif;
font-size: 18.66px;
line-height: 22.4px;
min-width:960px;
}
.container > div {
display: inline-block;
}
#box1 {
width: 340px;
}
#rightBoxes {
float: right;
}
#rightBoxes > div {
float: left;
}
#box2 {
margin-right: 45px;
}
#box3 {
margin-right: 81px;
}
Here's a screen shot of both correct and incorrect formatting of the website. On the left is the incorrect format that I only see on the online website in Chrome broswer when I first open the website. On the right is the correct format which Chrome switches to if website is refreshed (this format is also seen offline and on Safari):
(image cuts a bit of the website off, you should be able to see full website and notice the behavior described by clicking the link provided above)