how are you, well I am triying to make a Carrousel responsive with Javascritp, but I am struggling with the logic here.
I've tried everything, with css is imposible, because the images are note background images. I am about to go crazy with this.
This is the code
var carruselimagenes = []
carruselimagenes [0] = ["articulos.html" , "imagenes/cover1.png"]
carruselimagenes [1] = ["contacto.html" , "imagenes/cover2.png"]
carruselimagenes [2] = ["contacto.html" , "imagenes/cover3.png", "imagenes/cover400.png"]
carruselimagenes [3] = ["jardinvertical.html" , "imagenes/cover4.png"]
var carruselresponsive = []
carruselresponsive [0] = ["imagenes/cover400.png"]
var links = document.getElementById('linkcarrusel')
var imagenes = document.getElementById('imagencarrusel')
links.href = carruselimagenes [0][0]
imagenes.src= carruselimagenes [0][1]
var imagenesResponsive = responsive window.matchMedia("(max-width: 599px)")
if (window.matchMedia("(max-width: 599px)").matches) { imagenes.src = carruselresponsive [0]
else {
imagenes.src = carruselimagenes [0][1]
}
}
var orden = 0
function carruselautomatico() {
orden++
if (orden>3) {orden=0}
links.href = carruselimagenes[orden][0]
imagenes.src = carruselimagenes[orden][1]
}
setInterval(carruselautomatico, 6000)
function carruselflechasadelante() {
orden++
if (orden>3) {orden=0}
links.href = carruselimagenes[orden][0]
imagenes.src = carruselimagenes[orden][1]
}
function carruselflechasatras() {
orden--
if (orden<0) {orden=3}
links.href = carruselimagenes[orden][0]
imagenes.src = carruselimagenes[orden][1]
}
body{background-color: white;
font-family: 'Open Sans', sans-serif;}
header, section, footer{ width: 960px;
margin-right: auto;
margin-left: auto;
}
#carrusel{ width:960px;
height: 350px;
background-color: #d4d9a0;
margin-top: 15px;
margin-bottom: 15px;
position: relative;
text-align: center;
}
button{ background-color: none;
height: 30px;
width: 90px;
margin-top: 10px;
margin-left: 35px;
border-color: #00ab84;
color: #00ab84;
display:inline-block;
font-size: 30px;
text-align: center;
line-height: 5px;
}
button:hover{background-color: #00ab84;
color:white;
transition: 1s;}
/** Responsive**/
#media all and (min-width: 600px) and (max-width: 1023px){
#carrusel{ width:400px;
height: 400px;}
}
/*Fin responsive 600 1023**/
#media all and (max-width: 599px) {
#carrusel{ width:300px;
height: 400px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Prueba Carrusell</title>
<link rel="stylesheet" type="text/css" href="css/stylecarrusel.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<script type="text/javascript" src="js/script.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
</head>
<body>
<div id="carrusel">
<img src="" id="imagencarrusel">
<button id="atras" onclick="carruselflechasatras()"><</button>
<button id="adelante" onclick="carruselflechasadelante()">></button>
</div>
<script type="text/javascript" src="js/scriptcarrusel.js"></script>
</body>
</html>
It just doesn't work, and my head is about to explode. Could somebody give me a hand??
Best!
Matt
I think the reason your having trouble is because the image shows at the full size no matter what the container size is.
you can stop it using css overflow: hidden; but for you try this:
#carrusel img {
max-width: 100%;
}
Related
I am adding images of cards for a blackjack game and for whatever reason when I try to insert images through JS, they don't appear on the website. The hit button is supposed to add a new random card. The goal is to generate a random suite and a number and add the source accordingly.
let randomSuite;
let randomNum
let count = 1;
var cards = new Array();
const suites = new Array();
suites[0] = "H";
suites[1] = "S";
suites[2] = "C";
suites[3] = "D";
window.onload = function main(){
for(let i = 0 ; i < 56 ; i++){
randomNum = (Math.random() * 12) + 1;
cards.push(Math.floor(randomNum));
console.log(cards[i]);
count++;
}
}
function hitFunc(){
randomSuite = Math.floor(Math.random() * 3);
var img = document.createElement("img");
img.setAttribute("src","PNG-cards-1.3\1C.png");
document.body.appendChild(img);
//alert(randomSuite); used to check whether or not my code is running random numbers
img.id = count;
count++;
}
*{
margin: 0;
padding : 0;
font-family: sans-serif;
}
#divId {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.main{
width: 100%;
height: 100vh;
background-color:black;
}
.img1{
position: relative;
z-index: -1;
margin: 10px auto 20px;
display: block;
width: 75%;
height: 75%;
}
.img2{
position: relative;
z-index: 1;
margin: 10px auto 20px;
display: block;
bottom: 150px;
width: 7%;
height: 7%;
}
.hitButton {
z-index: 1;
position: relative;
text-align: center;
left: 175px;
bottom: 250px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
color: aliceblue;
object-position: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>first js website</title>
<link rel = "stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<style>
h1{text-align: center;}
</style>
<body class="main">
<div id="divId">
<h1 class="center">black jack</h1>
<img src="C:\Users\Adamf\OneDrive\Pictures\Camera Roll\background.jpg"
alt="" class="img1">
<button class="hitButton" id="hitbtn" onclick="hitFunc()">HIT</button>
<img src="PNG-cards-1.3\1C.png"
alt="" class="img2">
</div>
</body>
</html>
When I insert the same photo in html it works fine however when I try to manually add (the same path) it in JavaScript the same image does not want to appear. It will show up as if the image is not found.
edit: I just added the full program to stop confusion. Also, I am very new to JS so forgive my lack of knowledge.
I don't think anything wrong with your JS. Just check the image URL. Search on google about img attributes to see if anythings different.
I'm adding a feature to a squarespace website. The feature is a new image fade-in/fade-out effect when the mouse is hovering over one of three buttons. The problem is that the static/main image is an img element in the html and not in the css, so I can't change it like that. I have tried to change the element.src in javascript however there's no transition. Is the best way to add another element in the javascript code so I can make the added img transition with opacity? That just seems like a lot of extra work trying to put it in when working in squarespace.
Any suggestions? By the way I have a snippet showing my code and the issue.
PS, the buttons are under the image at the moment. That doesn't need a fix.
let jw_backgroundswitch = document.querySelector('.section-background img');
let jw_btn = document.querySelectorAll('.sqs-block-content h1 a');
let images = ['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg'];
jw_btn.forEach(function(jw_btn_current, index) {
jw_btn_current.addEventListener('mouseenter', function() {
jw_backgroundswitch.src = images[index];
});
jw_btn_current.addEventListener('mouseleave', function() {
jw_backgroundswitch.src = 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg';
});
});
*,*::before,*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
height: 200vh;
}
.section-background{
}
img{
background-repeat: no-repeat;
transition: all .5s ease-in-out;
}
.ulwrapper{
display: flex;
height: 100vh;
align-items: center;
}
.sqs-block-content{
display: flex;
width: 100%;
height: 4rem;
list-style: none;
}
h1{
margin: auto;
cursor: pointer;
}
h1 a{
font-weight: bolder;
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='section-background'>
<img alt="" data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg" data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg" data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613" data-load="false" data-parent-ratio="1.4" style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg?format=2500w">
<div class="ulwrapper">
<div class="sqs-block-content">
<h1 class="jw_btn"><a>Button1</a></h1>
<h1 class="jw_btn"><a>Button2</a></h1>
<h1 class="jw_btn"><a>Button3</a></h1>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I would superpose two <img> elements inside a <div> wrapper and play with the opacity. The static picture will be above when the mouse is not hovering on a button and when hovering, first you set the image below with imageBelow.src = images[i] and then change the opacity of the image above with imageAbove.style.opacity = "0";
wrapImages();
let imageBelow = document.querySelector('.pics .below');
let imageAbove = document.querySelector('.pics .above');
let jw_btn = document.querySelectorAll('.sqs-block-content h1 a');
let images = ['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg'];
jw_btn.forEach(function(jw_btn_current, index) {
jw_btn_current.addEventListener('mouseenter', function() {
imageBelow.src = images[index];
imageAbove.style.opacity = "0";
});
jw_btn_current.addEventListener('mouseleave', function() {
imageAbove.src = 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg';
imageAbove.style.opacity = "1";
});
});
function wrapImages() {
let sectionBackground = document.querySelector('.section-background');
let images = sectionBackground.getElementsByTagName('img');
var newDiv = document.createElement("div");
newDiv.className="pics";
sectionBackground.insertBefore(newDiv, sectionBackground.firstChild);
newDiv.appendChild(images[0]);
newDiv.appendChild(images[1]);
images[0].className="below";
images[1].className="above";
}
*,*::before,*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
height: 200vh;
}
img{
background-repeat: no-repeat;
transition: all .5s ease-in-out;
}
.pics {
position: relative;
width: 100%;
height: 100vh;
}
.pics > img {
position: absolute;
transition: all .4s ease;
}
.ulwrapper{
display: flex;
height: 100vh;
align-items: center;
}
.sqs-block-content{
display: flex;
width: 100%;
height: 4rem;
list-style: none;
}
h1{
margin: auto;
cursor: pointer;
}
h1 a{
font-weight: bolder;
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='section-background'>
<img alt=""
data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613"
data-load="false" data-parent-ratio="1.4"
style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;"
data-image-resolution="2500w"
src="https://images.unsplash.com/photo-1610043238036-7309f1cc52d8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1534&q=80">
<img alt=""
data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613"
data-load="false" data-parent-ratio="1.4"
style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;"
data-image-resolution="2500w"
src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg?format=2500w">
</div>
<div class="ulwrapper">
<div class="sqs-block-content">
<h1 class="jw_btn"><a>Button1</a></h1>
<h1 class="jw_btn"><a>Button2</a></h1>
<h1 class="jw_btn"><a>Button3</a></h1>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
EDIT
If as you stated SquareSpace doesn´t allow you to add a wrapper to the HTML, then you can add a wrapper programatically. I have now added the function wrapImages() which must be called at the beginning of the JS code.
This is my first leap on trying to implement a HTML/CSS website, so please take this into consideration.
I have multiple .html pages that implement the navbar from a nav.html, using a jQuery function( i guess?). The other html's are similar to index.
Any idea of what's wrong?
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
The code i used for adding active class is pure JS.
Here is index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/9a39db93cf.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
let count = 0;
function counter()
{
count++;
document.querySelector('#pageContent').innerHTML = count;
}
</script>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<script type="text/javascript">
const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length
for( let i=0; i<menuLength; i++){
if(menuItem[i].href === currentLocation){
menuItem[i].className = "active";
}
}
</script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<div id="nav-placeholder" class="sticky-top">
</div>
<div class="firstPage">
<h4>The title of this paragraph</h4>
<img onclick="counter(); return false;" src="images/mirciun.jpg" alt="mirciun" height=auto max-width=auto class="center">
<p id='pageContent'>0</p>
</div>
</body>
</html>
CSS:
body{
display: block;
margin: 0;
}
.menu li{
display: inline-block;
margin: 0;
}
ul.topnav{
background-color: #333;
margin: 0;
padding: 0;
text-align:center;
overflow: hidden;
}
ul.topnav li a{
display: block;
font-size: 20px;
padding: 10px;
color: whitesmoke;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #222;}
ul.topnav li a.active {background-color: #4CAF50;}
#media screen and (max-width: "600px") {
ul.topnav li {float: none;}
}
#brand{
display: table-cell;
vertical-align: middle;
line-height:50px;
}
#topText{
max-width: 500px;
margin: auto;
text-align: center;
border: 5px solid green;
color: red;
background-color: #0f0f0f;
margin-top: 10px;
}
.firstPage
{
margin-top: -20px;
background-color:grey;
max-width: 100%;
height: auto;
}
h4{
padding: 20px;
text-align: center;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
#pageContent{
text-align:center;
width: 75%;
margin: auto;
color: blue;
}
wrap your code with jquery on ready function and move to the bottom of the page.
$(function () {
const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length
for (let i = 0; i < menuLength; i++) {
if (menuItem[i].href === currentLocation) {
menuItem[i].className = "active";
}
}
})
Nevermind, i solved it using $( window ).on( "load", function(){, instead of $( document ).ready(function () { . The short explanation is that code will run once the entire page (images or iframes), not just the DOM, is ready. - > https://learn.jquery.com/using-jquery-core/document-ready/
I am trying to understand why the below code snippet returns the wrong value and it doesn't matter whether I use clientWidth or offsetWidth.
const imgSize = document.querySelector('.slides').children[0].offsetWidth;
console.log(imgSize);
What does matter is where I import my script though. I found out that it will only return the correct value when I import my script at the end of my body tag, in addition, I have to keep the defer attribute!
<script src="../source/js/myJS.js" defer></script>
If I would import this in my head it is not working.
The oddest thing is when I import my script in my head with the defer attribute, then I will get randomly two values (133px or 450px), but only 450 is correct. So where does this effect come from?
I will now past the relevant css in case it is needed to answer my question because I am not sure whether it will be:
* {
box-sizing: border-box;
margin: 0;
}
body {
margin: 0;
font-size: 62.5%;
font-family: 'Rochester';
font-family: 'Open
#gen-info .container-carousel {
overflow: hidden;
width: 450px;
height: auto;
margin: auto;
position: relative;
}
#gen-info .slides {
display: flex;
align-items: center;
align-content: center;
}
#gen-info img {
width: 450px;
height: 300px;
}
#gen-info h3 {
display: none;
font-size: 1.4rem;
text-align: center;
margin: 15px 0 40px 0;
}
#gen-info .current-heading {
display: block;
}
.prevBtn {
position: absolute;
top: 50%;
z-index:2;
left: 5%;
font-size: 30px;
color: white;
opacity: 0.5;
cursor: pointer;
}
.nextBtn {
position: absolute;
top: 50%;
z-index:2;
right: 5%;
font-size: 30px;
color: white;
opacity: 0.5;
cursor: pointer;
}
.nextBtn:hover {
opacity: 1;
}
.prevBtn:hover {
opacity: 1;
}
I also have media queries but in none, is a width of 133px
Edit:
The Html
//head area
<head>
<meta charset="utf-8" />
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="../source/css/style.css" />
<link
href="https://fonts.googleapis.com/css?family=Open+Sans|Rochester&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/427c34389f.js"
crossorigin="anonymous"
defer
></script>
<script src="../source/js/myJS.js" defer></script>
</head>
// img area
<section id="gen-info">
<div class="container-carousel">
<i class="fas fa-arrow-left prevBtn"></i>
<i class="fas fa-arrow-right nextBtn"></i>
<div class="slides">
<img src="../source/img/gen-info/information/WinterAlt.jpg" alt="outsideHous">
<img src="../source/img/gen-info/information/feldberg.jpg" alt="Feldberg">
<img src="../source/img/gen-info/information/bspWinter2.jpg" alt="winterTitisee">
<img src="../source/img/gen-info/information/bspWinter1.jpg" alt="snowTrecking">
</div>
</div>
</section>
//complete JS
const btnPrevList = document.querySelectorAll('.prevBtn');
const btnNextList = document.querySelectorAll('.nextBtn');
const slides = document.querySelectorAll('.slides');
const imgSize = document.querySelector('.slides').children[0].offsetWidth;
console.log(document.querySelector('.slides').children[0]);
console.log(imgSize);
const makeCloneSlides = (img, c) => {
const lastClone = img[img.length - 1].cloneNode();
const firstClone = img[0].cloneNode();
lastClone.className = 'last-clone';
firstClone.className = 'first-clone';
slides[c].insertAdjacentElement('beforeend', firstClone);
slides[c].insertAdjacentElement('afterbegin', lastClone);
};
const moveCarouselLeft = () => {
console.log('left');
};
const moveCarouselRight = () => {
console.log('right');
};
for (c = 0; c < slides.length; c++) {
let img = document.querySelectorAll('.slides')[c].children;
makeCloneSlides(img, c);
slides[c].style.transform = 'translateX(' + -imgSize + 'px)';
}
for (c = 0; c < btnPrevList.length; c++) {
btnPrevList[c].addEventListener('click', moveCarouselLeft);
}
for (c = 0; c < btnNextList.length; c++) {
btnNextList[c].addEventListener('click', moveCarouselRight);
}
This is the script i wrote to get an ajax response.
<script>
$( document ).ready(function()
{
$("#log").click(function(){
alert('hellow');
$.ajax({
url: "http://1xx.1xx.0.1xx:8081/script.login",
type: "GET",
data: { 'page':'create_user', 'access':'user','username':'user', 'password':'user'},
dataType: "html"
}).done(function(resp) {
console.log(resp);
var $response = $(resp);
});
});
})
</script>
This is how the ajax response body looks like.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<meta http-equiv="refresh" content="900" >
<title>Toronto Raptors</title>
<link href="Html/Panel/ControlPanelStyle.css" rel="stylesheet" type="text/css">
<!--THIS WILL SUPPRESS ALL ERROR POPUPS-->
<script type="text/javascript">
<!--
var debugMode = false; //turns on error messages for windows and grids ->false = production build
//Hide all window errors
if(debugMode == true){
function silentErrorHandler() {return true;}
window.onerror=silentErrorHandler;
}
//-->
</script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
position: absolute;
width: 100%;
height: 100%;
background: #244A77;
}
a img {
text-decoration: none;
border: 0 none;
}
Html, body {
Overflow:hidden;
}
font.text {
visibility:visible;
}
#pageContainer{
width: 100%;
height: 100%;
background: 244A77; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#244A77', endColorstr='#7DA7D9'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(244A77), to(7DA7D9)); /* for webkit browsers */
background: -moz-linear-gradient(top, #244A77, #7DA7D9); /* for firefox 3.6+ */
}
/*CSS for resizing counter Widgets*/
div#counter2containercontainer {position:absolute; width:100%; height:100%; margin: 0px auto; text-align:center; overflow:hidden; text-align: center; }
div.counter2container {position: relative; overflow: hidden; margin: 0px auto; border: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; text-align:center; vertical-align:middle; z-index: 4; width: 100%; height: 100%;}
div#counter5containercontainer {position:absolute; width:100%; height:100%; margin: 0px auto; text-align:center; overflow:hidden; text-align: center; }
div.counter5container {position: relative; overflow: hidden; margin: 0px auto; border: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; text-align:center; vertical-align:middle; z-index: 4; width: 100%; height: 100%;}
div#counter10containercontainer {position:absolute; width:100%; height:100%; margin: 0px auto; text-align:center; overflow:hidden; text-align: center; }
div.counter10container {position: relative; overflow: hidden; margin: 0px auto; border: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; text-align:center; vertical-align:middle; z-index: 4; width: 100%; height: 100%;}
div#counter11containercontainer {position:absolute; width:100%; height:100%; margin: 0px auto; text-align:center; overflow:hidden; text-align: center; }
div.counter11container {position: relative; overflow: hidden; margin: 0px auto; border: none; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bold; text-align:center; vertical-align:middle; z-index: 4; width: 100%; height: 100%;}
</style >
<!-- general window handling -->
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxWindows/codebase/dhtmlxwindows.css" />
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css" />
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxWindows/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxWindows/codebase/dhtmlxcontainer.js"></script>
<!--Tree - Used for Triggers -->
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxTree/codebase/dhtmlxtree.css" />
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxTree/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxTree/codebase/dhtmlxtree.js"></script>
<!--acordian Used for Triggers and Healtcare -->
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxAccordion/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxAccordion/codebase/dhtmlxaccordion.js"></script>
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxAccordion/codebase/skins/dhtmlxaccordion_dhx_skyblue.css" />
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxAccordion/codebase/dhtmlxcontainer.js"></script>
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxMenu/codebase/skins/dhtmlxmenu_dhx_skyblue.css" />
<script src="../../dhtmxSuite/dhtmlxMenu/codebase/dhtmlxcommon.js"></script>
<script src="../../dhtmxSuite/dhtmlxMenu/codebase/dhtmlxmenu.js"></script>
<!--Other Header Files Required-->
<!--JAVASCRIPT to autore-size counter widgets-->
<script type="text/javascript">
//$(document).ready(function() {
function divresize(counterName) {
//alert("RIZSE1");
var containerName = '.' + counterName + 'container'
var secondContainer = '#' + counterName + "containercontainer";
var contentwidth = $(secondContainer ).width();
var contentheight = $(secondContainer ).height();
$(containerName).css('width',contentwidth )
$(containerName).css('height',contentheight );
//Better ReSize Attempt...
//Determine Character Width
/*var elem = document.getElementById(counterName +"_Value");
var currentText = elem.innerHTML;
var widthMultiplier = 1;
if(currentText.length > 1){
widthMultiplier = (currentText.length);
contentwidth = contentwidth / (widthMultiplier);
}*/
//Make the size the same as the smaller of the two dimensions
if(contentwidth < contentheight){ $('#' + counterName+ '_Value.text').css('font-size',contentwidth / (1.3)); }
else{ $('#' + counterName+ '_Value.text').css('font-size',contentheight / (1.3)); }
//alert("RIZSE");
}
</script>
<!-- dhtmlxGrid -->
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxGrid/codebase/ext/dhtmlxgrid_ssc.js"></script>
<link rel="STYLESHEET" type="text/css" href="../../dhtmxSuite/dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../dhtmxSuite/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<!--dhtmlxCharts Required-->
<link rel="STYLESHEET" type="text/css" href="../../dhtmxSuite/dhtmlxChart/codebase/dhtmlxchart.css">
<script type="text/javascript" src="../../dhtmxSuite/dhtmlxChart/codebase/dhtmlxchart.js"></script>
<!--Javascript For Speedo and/or Counter Required-->
<script type="text/javascript" src="WidgetFiles/jquery.speedometer-1.0.4/jquery-1.4.min.js"></script>
<script type="text/javascript" src="WidgetFiles/jquery.speedometer-1.0.4/jquery.speedometer.js"></script>
<script type="text/javascript" src="WidgetFiles/jquery.speedometer-1.0.4/jquery.jqcanvas-modified.js"></script>
<script type="text/javascript" src="WidgetFiles/jquery.speedometer-1.0.4/excanvas-modified.js"></script>
</head>
<!--<body onload="doOnLoad();" style="background-image: url('../../dhtmxSuite/images/BannerTileBackground.gif'); background-repeat: repeat-x; background-color: #87AEC5;" >-->
<body onload="doOnLoad();" >
<div id="pageContainer">
<div id="counter2_div">
<div id="counter2containercontainer">
<div class="counter2container"><font class="text" id="counter2_Value"></font></div>
</div>
</div>
<div id="counter5_div">
<div id="counter5containercontainer">
<div class="counter5container"><font class="text" id="counter5_Value"></font></div>
</div>
</div>
<div id="counter10_div">
<div id="counter10containercontainer">
<div class="counter10container"><font class="text" id="counter10_Value"></font></div>
</div>
</div>
<div id="counter11_div">
<div id="counter11containercontainer">
<div class="counter11container"><font class="text" id="counter11_Value"></font></div>
</div>
</div>
<div id="pie_medium6_div" style="width:100%;height:100%;position:absolute"></div>
<div id="speedometer4_div" style="width:100%;height:100%;position:relative;left:0px;top:0px">0</div>
<script type="text/javascript">$(function(){ $('#speedometer4_div').speedometer(); }); </script>
<!--<div id="winVP" style="position: relative; height: 100%; margin: 0px;"></div>-->
<div id="triggersActive" style="width:100%;height:100%;"></div>
<div id="triggersHistory" style="width:100%;height:100%;"></div>
<div id="triggerBox" style="width:100%;height:100%;"></div>
<div id="pageFooter">Powered By Raptors</div>
</div>
</body>
<script type="text/javascript">
var dhxWins;
var dhxAccord;
var menu;
var w999;
var triggers;
var showWidgets;
var tree;
//Globals needed for banner messages
var marqueeQueue = [""];
var lastMessage = "";
var lastTrigger = "";
var lastFiringTriggerList = "";
var marqueeCounter = 0;
var marqueeIndex = 0;
//Globals needed for initial start positions if null
var curTopPos = 27;
var curLeftPos = 0;
var curBottomPos = 0;
var windowDim = getBrowserDimensions();
var maxWidth = windowDim.split(',')[0];
var maxHeight = windowDim.split(',')[1];
var initialLoadMode = true;
var warningBorderSytle = "solid 5px #FFFF00";
var urgentBorderSytle = "solid 7px #FFA500";
var criticalBorderSytle = "solid 10px #FF0000";
function doOnLoad() {
//Ignore chart Errors
if(debugMode == false){
dhtmlxError.catchError("LoadXML",function(a,b,data){ });
}
//Create a viewport and attach to existing div
dhxWins = new dhtmlXWindows();
//dhxWins.enableAutoViewport(false);
//dhxWins.attachViewportTo("winVP");
//Handle moving and resizing widgets... save to cookie
dhxWins.attachEvent("onMoveFinish", function(win){ setWindowStatusCookie(win,1); });
dhxWins.attachEvent("onResizeFinish", function(win){ setWindowStatusCookie(win,1); });
dhxWins.attachEvent("onFocus", function(win){ updateZIndex(win); });
//dhxWins.attachEvent("onClose", function(win){ setWindowStatusCookie(win,0); });
dhxWins.setImagePath("dhtmxSuite/dhtmlxWindows/codebase/imgs/");
dhxWins.attachEvent("onClose", function(win){ win.hide(); });
//ShowWidgets Window
showWidgets = dhxWins.createWindow("showWidgets", 0, 30, 250, 600);
showWidgets.setText("Add Widget");
tree = showWidgets.attachTree();
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../dhtmxSuite/dhtmlxTree/codebase/imgs/csh_bluefolders/");
tree.setOnCheckHandler(widgetTree_oncheck);
tree.enableCheckBoxes(true,true);
tree.deleteChildItems(0);
tree.insertNewChild(0, 'w2', "Raptors are back");
tree.insertNewChild(0, 'w5', "Celtics is never the same");
tree.insertNewChild(0, 'w10', "lakers are up");
tree.insertNewChild(0, 'w11', "Heat is going down");
tree.insertNewChild(0, 'w1', "Leafs are back");
</script>
I am intrested in parsing out the very bottom part where it says:
tree.insertNewChild(0, 'w2', "Raptors are back");
From this i want to parse out ==> Raptors are back
Can anyone please provide some guidance or clue or help as to how i can do this? I have been stuck on this for 2 days. I am very new to web development in general so i apologize if this is a poorly worded question.
Something like this should work if you need to accept the result as HTML:
$.ajax({
url: "http://1xx.1xx.0.1xx:8081/script.login",
type: "GET",
data: { 'page':'create_user', 'access':'user','username':'user', 'password':'user'},
dataType: "html",
success: function (html) {
alert(/tree.insertNewChild\([^"]*"([^"]*?)"\);/g.exec(html)[1]);
}
});
Here is an example on jFiddle too:
http://jsfiddle.net/hcrM8/16/