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"?
Related
This question already has answers here:
Show/hide 'div' using JavaScript
(15 answers)
Closed 5 years ago.
I am an macOS developer and am learning Javascript for the coding of Fitbit Ionic watch. I've tried an online/offline map app test. It works when online map and offline IMAGE map are displayed side by side in html.
<table border="0" cellpadding="0" cellspacing="0">
<td>
<div id="mymap" style="width: 348px; height: 250px; position: relative; overflow: hidden;"></div>
</td>
<td>
<div style="width: 348px; height: 250px; position: relative; overflow: hidden;">
<img id="partImage" alt="" style="transform:scale(0.5); position: absolute" />
</div>
</td>
</table>
<script type="text/javascript">
//...
function OfflineIt(){
//...
//grab statics map image and processing
//saved map image is 1280x1280 in size
//...
document.getElementById('mymap').style.visibility ='hidden';
document.getElementById('partImage').style.visibility ='visible';
//...
}
</script>
The second div is 348x250 and display part of my 1280x1280 offline map correctly as the first div did. The hidden of online map is working too. But, when I tried to remove the second div and move my img into the first div, my offline image window will display in full size 1280x1280 instead of the requested 348x250.
<td>
<div id="mymap" style="width: 348px; height: 250px; position: relative; overflow: hidden;">
<img id="partImage" alt="" style="transform:scale(0.5); position: absolute" />
</div>
</td>
How may I replace the online map div with my offline image div and display the image correctly?
This answered my question:
How to show or hide an element: display & visibility
Hope it is helpful to others, thanks!
my final code is:
document.getElementById('mymap').style.display ='none';
document.getElementById('partImage').style.display ='block';
...
<td>
<div id="mymap" style="width: 348px; height: 250px; "></div>
<div id="myimage" style="width: 348px; height: 250px; position: relative; overflow: hidden;">
<img id="partImage" alt="" style="transform:scale(0.5); position: absolute; " />
</div>
</td>
i am using touchSwipe plugin of jquery to convert swipe into click .
it seems to be working as when i swipe pages refresh or try to reach next page but same content is being displayed.
i have doubt in this line of code for next click/swipe.
window.location.href='http://something.com/aakarsha/2559277';
here is my fiddle.Any help will be great
https://jsfiddle.net/bydbest/9gsgLqst/
here is direct link
http://something.com/aakarsha/2559277
<html><body>
<p><div class="content_main_div div_100_per"><div id="timeline_content"><div><div class="content_box_main">
<div class="messagelove_box" style="" ><div class="content_box_1">
<div class="content_box_2z"><sup class="joke_icon"></sup></div>
<div class="content_box_3_title"></div>
<div class="content_box_3_text"><div style="position: absolute; top: 35%; left: 0%; margin: 0 auto; text-align: center;"></div>
<div style="position: absolute; top: 35%; right: 0%; margin: 0 auto; text-align: center;"></div>
<div id="detail_view" class="detail_view"><div class="detail_view_m" id="detail_view_m"><img src="http://image.something.com/misc/lazyg/aakarsha/people/aakarsha_aakarsha_photoshoot_stills_027_jpg_700_1052__mxoWV4za.sized.jpg" width="99%" alt="aakarsha" title="aakarsha"/>
</div><a style="top: 188.5px;" id="view_prev" class="view_prev prev" href="http://something.com/aakarsha/2559276"></a>
<a style="top: 188.5px;" id="view_next" class="view_next next" href="http://something.com/aakarsha/2559276"></a></div> </div><div class="content_box_5"><span class="vote" data-name="up" id="2559277"><span class="lipos">0 Likes</span></span></div> </div></div>
</div><script src="http://code.jquery.com/jquery-1.10.2.js"></script><script type="text/javascript" src="http://www.something.com/app/jquery.touchSwipe.min.js"></script>
<script type="text/javascript">
$("a").swipe({
swipe: function(event) {
window.location.href='http://something.com/aakarsha/2559277';
},
threshold: 75,
excludedElements: "label, button, input, select, textarea, .noSwipe"
});
</script>
</body>
</html>
i have gone through github and aware about the blocking of anchor tag so excluded the same in javascript. then also its not working
Solved the problem. it was the link which was causing problem. it works just fine now.enjoy
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'm new to Javascript, but I've been teaching myself CSS and some php so I'm hoping to learn a bit. I've been looking all over the last couple days to figure out what I want, hopefully this isn't a dumb question.
I'm trying to build mini-image galleries for a page of porfolio projects of mine. I've got a page of about 8 large images - each one for a different project. I'm trying to get it where if you click on an image it will load the next image of that project (Mission accomplished! I've gotten that with a code I found online)
But I also want pagination dots (basically, images of circles), like I've seen on other websites, to represent the images in the set. So if there's three images of a project, you'll see three dots and clicking on the third dot takes you to the third image -- and that dot image replaces with the 'selected dot' image. Make sense?
I've been looking all day for scripts and examples of how to do this, and this is as far as my Javascript has gotten. This is the script for the first project. With the others I input the same script, but change the variables. img1 becomes img2 then img3 and so on. Can anyone tell what's wrong?
<div class="project" id="proj1">
<script type="text/javascript">
var img1 = [
"img/portf/tiger1.jpg",
"img/portf/tiger2.jpg",
"img/portf/tiger3.jpg"
];
img1.current = 0;
function showImage1(i) {
$('#imag1').fadeOut( function() {
this.src = img1[img1.current];
$(this).fadeIn();
});
}
function NextImage1() {
img1.current = (img1.current+1) % img1.length;
showImage1(img1.current);
}
function PreviousImage1() {
if (--img1.current < 0) { img1.current = img1.length - 1; }
showImage1(img1.current);
}
onload = function(){
showImage1(0);
};
</script>
<div class="projname">
<div class="ProjectTitle">
Tigercat Website
</div>
<div class="PaginationButtons">
<img src="img/active.gif" />
<img src="img/inactive.gif" />
<img src="img/inactive.gif" />
</div>
<div class="clear"></div>
</div>
<div class="projwindow">
<a href="javascript:NextImage1()">
<img src="img/portf/tiger1.jpg" name="Tigerc" width="800" height="600" id="imag1" />
</a>
</div>
</div>
You can see what I have so far here: http://www.gmisen.com
Thanks so much for the help!!
Might not be the greatest learning experience, but you can easily achieve this with the jQuery cycle plugin: http://jquery.malsup.com/cycle/int2.html (take a look at the pager example)
here's a demo: http://jsfiddle.net/69LNJ/
HTML
<div class="slideshow">
<img src="http://flickholdr.com/400/400/cat/bw">
<img src="http://flickholdr.com/400/400/cat/bw/1">
<img src="http://flickholdr.com/400/400/cat/bw/2">
</div>
JS
$(function() {
$('.slideshow').before('<div id="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav'
});
});
CSS
#nav{
position: absolute;
top: 20px;
left: 20px;
z-index: 1000;
}
#nav a{
background-color: cyan;
border-radius: 10px;
height: 20px;
width: 20px;
display: block;
text-indent: -1000px;
float: left;
margin-right: 10px;
}
#nav a.activeSlide{
background-color: blue;
}
Alright, so I'm working on a website and currently I have a "shoutbox" at the index page however I'm loading the shouts from another .php file the problem is that the scrollbars shows up but I can't actually scroll, at the moment there are 6 shouts in the DB that are being loaded but I can only see 4 and I can't scroll down any more.
If you want to check out the problem for yourself here is the link to the site (work in progress) http://ecazs.net/beerandguns/index.php
You are only able to see 4 but I can assure you there are 6!
This is the code I use to load shouts.
$(document).ready(function(){
$('.messages').fadeIn("slow").load('shoutbox/load.shouts.php');
setInterval(function() {
$(".messages").load("shoutbox/load.shouts.php");
}, 2000);
});
And this is the "main" HTML of the shoutbox
<div id="chat" class="jspScrollable">
<div class="jspContainer" style="width: 620px; height: 327px;">
<div class="jspPane" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 600px; top: 0px; ">
<form action="" method="post" class="shout">
<p>
<label for="message" class="msglabel">Message:</label>
</p>
<p>
<textarea name="message" id="message" class="msgfield" rows="2" cols="95"></textarea>
</p>
<p>
<input type="image" name="submit" src="ext/images/submit_btn.png" value="" class="submit" onmouseover="this.src = 'ext/images/submit_btn_hover.png';" onmouseout="this.src = 'ext/images/submit_btn.png';"/>
</p>
</form>
<div class="messages"></div>
</div>
I'm then using the jScrollpane function before body ENDS. So I'm first loading the content then the jScrollpane.
$(function(){
$('#chat').jScrollPane();
});
I really need help with this, if you have any ideas on how to solve this or improve it then please, please let me know.
Your HTML is not good for jScrollPane.
You have two .jspContainer and .jspPane in #chat.
Just remove the classes jspContainer and jspPane for the elements in the first div.jspPane
And you have to use the callback function for load, to tell the jScrollPane the content changed.
your js should be something like :
//caching element
var messages = $('.messages'), chat = $('#chat');
messages.fadeIn("slow");
var loadChatContent = function() {
messages.load('shoutbox/load.shouts.php', chat.jScrollPane);
}
loadChatContent();
setInterval(loadChatContent, 2000);
--- update
I's a JS replacement for the one you show us :
$(document).ready(function() {
//caching element
var messages = $('.messages'), chat = $('#chat');
messages.fadeIn("slow");
var loadChatContent = function() {
messages.load('shoutbox/load.shouts.php', chat.jScrollPane);
}
loadChatContent();
setInterval(loadChatContent, 2000);
});
In your website ( not the code you shown ) your html contains two div.jspContainer and two div.jspPane, it will not work if you don't remove class from the elements in you first div.jspPane
Your code :
<div style="width: 640px; height: 327px;" class="jspContainer">
<div style="padding: 5px 10px; width: 600px; top: 0px;" class="jspPane">
<div class="jspContainer" style="width: 620px; height: 327px;">
<div class="jspPane" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 600px; top: 0px; ">
</div>
</div>
<div class="jspVerticalBar">
<div class="jspCap jspCapTop"></div>
<div style="height: 327px;" class="jspTrack">
<div style="height: 318px;" class="jspDrag">
<div class="jspDragTop"></div>
<div class="jspDragBottom"></div>
</div>
</div>
<div class="jspCap jspCapBottom"></div>
</div>
</div>
</div>
jScrollPane will accord the scroll with the height of the content of the first div.jspPane, but in your div.jspPane, you have a second div.jspContainer which have 327px for height. So jScrollPane consider that there is no more content to show. Just remove classes jspContainer and jspPane on line corresponding to my lines 3 and 4, and modify your js, i think it can work like that.
Well, you cannot ensure the jScrollPane() is called after the content has actually loaded by simply placing the code at the end of the page. Both codes are placed in the a DOMready event handler so they are in the end both executed right away as soon as the dom is loaded. I bet the execution plan is:
initiate fist load in .messages
execute jScrollPane
load finishes
And I guess the jScrollPane plugin does not initialize correctly because the content is empty. I don't know much about the plugin itself but I suppose you'd have to refresh it anyway if the content changes to update the scrollbars.
Using the callback of the .load() function will ensure you initialize the jScrollPane when the content has actually loaded:
$(".messages").load("shoutbox/load.shouts.php", function() {
$('#chat').jScrollPane();
});