Creating a marquee using anything? Javascript, Jquery, CSS

Creating a marquee using anything? Javascript, Jquery, CSS - javascript

I'm trying to build a blog using HTML and CSS. Now I've integrated API's for certain stocks using PHP and using the data I've created multiple widgets.
Now I'm trying to create a marquee similar to stock markets (endless and infinite without any gaps). I found a few examples on the but failed to understand its implementation.
Can anyone tell how the marquee like feature works in either of these websites
https://nse.com/ (at the top of the website)
https://www.gdax.com/
$('document').ready(function(){
refreshData();
})
function refreshData() {
$('#container-table').load("data.php", function(){
setTimeout(refreshData, 10000);
});
$('#container-tablel').load("datanike.php", function(){
setTimeout(refreshData, 10000);
});
$('#container-tabled').load("datamsft.php", function(){
setTimeout(refreshData, 10000);
});
$('#container-tablee').load("dataaapple.php", function(){
setTimeout(refreshData, 10000);
});
$('#container-tablex').load("dataamzn.php", function(){
setTimeout(refreshData, 10000);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
<div id="container-table"></div>
<div id="container-tablel"></div>
<div id="container-tabled"></div>
<div id="container-tablee"></div>
<div id="container-tablex"></div>
</div>
I would like to implement these like the one in GDAX. But any other implementation will also be greatly appreciated.
Thanks in advance.

You can use simple html <marquee> tag for infinite moving.
See example:
#container-table, #container-tablel, #container-tabled, #container-tablee, #container-tablex {
float: left;
padding: 0 20px 0 0;
}
<div class="container1">
<marquee>
<div id="container-table">test</div>
<div id="container-tablel">test1</div>
<div id="container-tabled">test2</div>
<div id="container-tablee">test3</div>
<div id="container-tablex">test4</div>
</marquee>
</div>

Try this
This is continuous marquee
// polyfill
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var speed = 5000;
(function currencySlide(){
var currencyPairWidth = $('.slideItem:first-child').outerWidth();
$(".slideContainer").animate({marginLeft:-currencyPairWidth},speed, 'linear', function(){
$(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
});
requestAnimationFrame(currencySlide);
})();
.slider{
width:100%;
overflow:hidden;
position:relative;
margin:0;
}
.edge{
left:0;
right:0;
top:0;
bottom:0;
position:absolute;
height:100%;
display:block;
}
.edge:before{
content:'';
position:absolute;
left:0;
background:-webkit-linear-gradient(left, white 10%, rgba(0,0,0,0) 100%);
width:25%;
height:100%;
}
.edge:after{
content:'';
position:absolute;
right:0;
background:-webkit-linear-gradient(right, white 10%, rgba(0,0,0,0) 100%);
width:25%;
height:100%;
}
ul{
background:#ddd;
overflow:hidden;
width:1000%;
margin:0;
}
li{
list-style:none;
display:inline-block;
padding:0 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='slider'>
<div class="edge"></div>
<ul class="slideContainer" id="money_start">
<li class="slideItem" >
EUR
</li>
<li class="slideItem">
USD
</li>
<li class="slideItem">
JPY
</li>
<li class="slideItem">
CNY
</li>
<li class="slideItem">
VD
</li>
<li class="slideItem">
GBP
</li>
<li class="slideItem">
AUD
</li>
<li class="slideItem">
CAD
</li>
<li class="slideItem">
CHF
</li>
<li class="slideItem">
XAU
</li>
</ul>
</div>

The NSE site is using custom-stock-ticker (A Word Press Plugin). A good place to start there is looking at stock_ticker_script.js.

Related

how can I change the background image when I click on a color?

I'm working on a project that changes the background image when a color is clicked on the screen, however I cannot get the javascript to work. I added a function to each "color". So far, I am trying to change the yellow box to change the background image when I click on it but it doesn't work. I'm not sure what I'm doing wrong. [![js file][1]][1]
Any suggestions are welcome!
Here is my html code for the body:
<!-- <img src="img/paint.png" alt="generic cat"> -->
<h2>Remote</h2>
<ul>
<li id="yellow"></li>
<li id="green"></li>
<li id="blue"></li>
<li id="lavender"></li>
</ul> ```
https://codepen.io/wendy1717/pen/XWVgbzM
[1]: https://i.stack.imgur.com/Lnbcc.png

const container = document.querySelector("#container");
function changeBackground(selectedClass){
container.className = selectedClass;
}
#container{
height: 100vh;
background-size: cover;
background-position:center;
}
.bg1{
background-image:url("https://imgs.search.brave.com/zT6fsauHvUuegWh8svCh_UOhRy5X58QaP_ibYrYWvVM/rs:fit:759:225:1/g:ce/aHR0cHM6Ly90c2Ux/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5O/YmZQRUNBNjR4YkZu/bVc1OE1iV0RRSGFF/byZwaWQ9QXBp");
}
.bg2{
background-image: url("https://imgs.search.brave.com/1vyWK4rOTmbxmlR3kj2W1YuzyTr_gWc--205IVnC5L0/rs:fit:632:225:1/g:ce/aHR0cHM6Ly90c2U0/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5i/aDd6cHZzUzdFWlU5/NzB3Y0t6N21nSGFG/aiZwaWQ9QXBp")
}
.bg3{
background-image: url("https://imgs.search.brave.com/Mv-UYNkZSBt0cx2hNpomYJFVS2tKh-UohoGMWY4LaPw/rs:fit:632:225:1/g:ce/aHR0cHM6Ly90c2Uz/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC4t/VzQ2MzU4aGowLVFk/dmsyeW45VElBSGFG/aiZwaWQ9QXBp")
}
.bg4{
background-image: url("https://imgs.search.brave.com/tCv_y1U67Wzg7I14UkXyw8JoIhRFEBNT7D86WELQvYU/rs:fit:759:225:1/g:ce/aHR0cHM6Ly90c2Uz/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5p/U3UyUmNDY2RtNzh4/YnhOREpNSlNnSGFF/byZwaWQ9QXBp")
}
ul{
list-style: none;
}
ul > li button{
margin-bottom: 10px;
padding: 5px;
}
<div id= "container">
<h2>Remote</h2>
<ul>
<li id="yellow" onclick="changeBackground('bg1')" >
<button style="background-color: yellow">Change Background</button>
</li>
<li id="green" onclick="changeBackground('bg2')">
<button style="background-color: green">Change Background</button>
</li>
<li id="blue" onclick="changeBackground('bg3')">
<button style="background-color: blue">Change Background</button>
</li>
<li id="lavender" onclick="changeBackground('bg4')">
<button style="background-color: lavender">Change Background</button>
</li>
</ul>
</div>

The URL in your code is not valid (document.body.style.backgroundImage = 'url(../img/summer.jpg)')... otherwise, it should work?

Jquery .resizable function - resize icon not displaying properly

New to coding and doing an interview challenge.
They've asked for a dashboard made from JQuery (which I've never used before).
Lots of help from W3schools and here in stack has me accomplished 100% of the functionality I need (even if the design could be improved: functionality first polish later!)
One of the bonus is to have some UI
/UX functionality, so I've made the divs dragable, and I added the snip below from https://jqueryui.com/resizable/ to make the divs resizable.
$(function()){
$( "resizable" ).resizable();
});
But when it runs, the little resize icon seems to do something different from the example on the page above.
Are there any ideas how I can fix it back into the resize icon, the way it is supposed to look?
var $linkID, $linkURL
function changeTime(){
let d= new Date(); //built in JS function
let mm = ('0' + d.getMinutes()).slice(-2);
let ss = ('0' + d.getSeconds()).slice(-2);
document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}
setInterval(changeTime, 1000); //updates the time dynamically.
//Group1
//Click to Show functionality: group 1
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information.
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
$(".clickToShow").click(function(){
$(".clickToShowBlock").hide();
let idTag = '#' + this.getAttribute("title");
$(idTag).toggle();
});
});
//Group 2
//Same as above, except using hover instead of click to show the images.
$(document).ready(function(){
$(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
$(idTag).show();
}, function(){let idTag = '#' + this.getAttribute("title");
$(idTag).hide();
$(".hoverToShowBlock").hide();
});
});
//Group3
//follows group 1 method, but loads all links at the same time by toggling a button.
$(document).ready(function(){
$("#showLinksButton").click(function(){
$(".showLinks").toggle();
});
});
$(function(){
$("#showLinksButton").click(function () {
$(this).text(function(i, text){
return text === "Show Links" ? "Hide Links" : "Show Links";
})
});
})
//https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
//Group4
//https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
var elements =$("#aviationLinks li");
var index=0;
var showTwo = function (index) {
if (index >=elements.length){
index = 0
}
elements.hide().slice(index, index+2).show();
setTimeout(function(){
showTwo(index +2)
}, 5000);
}
showTwo(0);
});
//Make key-value pairs on id and hyperlinks
const linkIDref = {
delphiInfo:"https://delphitechcorp.com/",
vrCityInfo:"https://vrcity.ca/",
auroraInfo:"https://auroraaerial.aero",
virbelaURL:"https://virbela.com",
amazonURL:"https://amazon.com",
moodleURL:"https://moodle.org",
xPlaneURL:"https://x-plane.com",
wordpressURL:"https://wordpress.org",
gitHub:"https://github.com",
googleMeet:"https://meet.google.com",
slack:"https://slack.com",
wrike:"https://wrike.com",
airbus:"https://airbus.com",
boeing:"https://boeing.com",
lockheedMartin:"https://lockheedmartin.com",
rtx:"https://rtx.com",
geAviation:"https://geaviation.com",
safran:"https://safran-group.com",
leonardo:"https://leonardocompany.com",
baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
$linkID = $(this).attr("id");
window.location.href=linkIDref[$linkID];
})
$( function() {
$( ".groups" ).draggable();
} );
$( function() {
$( ".groups" ).resizable();
} );
body{
font-family: Arial, Helvetica, sans-serif;
font-size:1em;
background-color: skyblue;
}
h1{
text-align:center;
}
div{
border: black solid 2px;
border-radius:10px;
}
#main{
width:100%;
height: fit-content;
border:none;
}
#dashboard{
margin:auto auto auto auto;
display:grid;
border:none;
grid-template-columns: auto auto;
column-gap: 1em;
row-gap: 1em;
width:100%;
height:fit-content;
}
#dateTime{
margin:1em auto 1em auto;
border: black solid 2px;
width:fit-content;
height:fit-content;
padding:1em;
font-size: larger;
font-weight: bolder;
background-color: snow;
}
.groups{
position: relative;
margin:auto auto auto auto;
width:35em;
min-width: 32.5em;
background-color: snow;
padding:0px;
overflow: hidden;
}
.groups h2{
position:relative;
top:-0.9em;
text-align:center;
background-color: blue;
color:white;
cursor:move;
}
ul{
list-style-type: none;
position:relative;
top:-0.5em;
}
#group1{
height:10em;
}
#group2{
height:10em;
}
.clickToShowBlock{
cursor:pointer;
display:none;
position:absolute;
top: 3.5em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock{
display:none;
position:absolute;
top: 4em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock img{
max-height:6em;
max-width:19em;
}
dd{
padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
display:none;
}
#showLinksButton{
position:absolute;
right:0.5em;
top:2em;
font-size:2em;
}
li:hover{
cursor:pointer;
}
dd:hover{
cursor:pointer;
}
#media screen and (max-width: 1200px)
{
#dashboard{
grid-template-columns: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<link rel="stylesheet" href="stylesheet2.css">
<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>Delphi Tech Corp Front-End Development Team Coding Test</title>
<script src="script2.js" defer></script>
</head>
<body>
<h1>TASK 2 Dashboard</h1>
<div id="main">
<div id = "dateTime"></div>
<div id = "dashboard">
<div id="group1" class = "groups">
<h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2>
<ul>
<li class="clickToShow" title = "vrCityInfo">VR City</li>
<li class="clickToShow" title = "delphiInfo">Delphi Tech Corp</li>
<li class="clickToShow" title = "auroraInfo">Aurora Aerial</li>
</ul>
<div id="vrCityInfo" class="clickToShowBlock link">
VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly.
<br>
https://vrcity.ca/
</div>
<div id="delphiInfo" class="clickToShowBlock link">
Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
<br>
https://delphitechcorp.com/
</div>
<div id="auroraInfo" class="clickToShowBlock link">
Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
<br>
https://auroraaerial.aero
</div>
</div>
<div id="group2" class = "groups">
<h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
<ul>
<li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
<li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
<li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
<li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
<li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
</ul>
<div id="virbela" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png">
</div>
<div id="amazon" class="hoverToShowBlock">
<img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">
</div>
<div id="moodle" class="hoverToShowBlock">
<img alt="Moodle" src="Logos/moodle_logo_small.svg">
</div>
<div id="xPlane" class="hoverToShowBlock">
<img alt="X-Plane" src="Logos/x-plane-logo.svg">
</div>
<div id="wordpress" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png">
</div>
</div>
<div id="group3" class = "groups">
<h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
<ul>
<dt>GitHub</dt>
<dd class="showLinks link" id="gitHub">https://github.com</dd>
<dt>Google Meet</dt>
<dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
<dt>Slack</dt>
<dd class="showLinks link" id="slack">https://slack.com</dd>
<dt>Wrike</dt>
<dd class="showLinks link" id="wrike">https://wrike.com</dd>
</ul>
<button id="showLinksButton">Show Links</button>
</div>
<div id="group4" class = "groups">
<h2 id="group4h2">Group 4 - Aerospace Companies</h2>
<ul id="aviationLinks">
<li class = "cycle link" id="airbus">airbus.com</li>
<li class = "cycle link" id="boeing">boeing.com</li>
<li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
<li class = "cycle link" id="rtx">rtx.com</li>
<li class = "cycle link" id="geAviation">geaviation.com</li>
<li class = "cycle link" id="safran">safran-group.com</li>
<li class = "cycle link" id="leonardo">leonardocompany.com</li>
<li class = "cycle link" id="baseSystems">baesystems.com</li>
</ul>
</div>
</div>
</div>
</body>
</html>

You simply did not use the jQuery-ui CSS file...
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
And you have a way too "wide" rule on div. So specific to the rezise handles, it needed an exception using the :not() selector.
div:not(.ui-resizable-handle){
var $linkID, $linkURL
function changeTime(){
let d= new Date(); //built in JS function
let mm = ('0' + d.getMinutes()).slice(-2);
let ss = ('0' + d.getSeconds()).slice(-2);
document.getElementById("dateTime").innerHTML = `${d.getMonth()}/${d.getDay()}/${d.getYear()} ${d.getHours()}:${mm}:${ss}`;
}
setInterval(changeTime, 1000); //updates the time dynamically.
//Group1
//Click to Show functionality: group 1
//clicks hide all divs, then uses a "title" attribute as a variable to toggle the associated box showing that title's information.
//I am no marketer, so the text is some basic info I read on the websites.
$(document).ready(function(){
$(".clickToShow").click(function(){
$(".clickToShowBlock").hide();
let idTag = '#' + this.getAttribute("title");
$(idTag).toggle();
});
});
//Group 2
//Same as above, except using hover instead of click to show the images.
$(document).ready(function(){
$(".hoverToShow").hover(function(){let idTag = '#' + this.getAttribute("title");
$(idTag).show();
}, function(){let idTag = '#' + this.getAttribute("title");
$(idTag).hide();
$(".hoverToShowBlock").hide();
});
});
//Group3
//follows group 1 method, but loads all links at the same time by toggling a button.
$(document).ready(function(){
$("#showLinksButton").click(function(){
$(".showLinks").toggle();
});
});
$(function(){
$("#showLinksButton").click(function () {
$(this).text(function(i, text){
return text === "Show Links" ? "Hide Links" : "Show Links";
})
});
})
//https://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery
//Group4
//https://stackoverflow.com/questions/4511652/looping-through-list-items-with-jquery
// http://jsfiddle.net/mblase75/wE4S8/
//from: https://stackoverflow.com/questions/20105762/show-n-number-of-list-elements-at-a-time-jquery
$(document).ready(function (){
var elements =$("#aviationLinks li");
var index=0;
var showTwo = function (index) {
if (index >=elements.length){
index = 0
}
elements.hide().slice(index, index+2).show();
setTimeout(function(){
showTwo(index +2)
}, 5000);
}
showTwo(0);
});
//Make key-value pairs on id and hyperlinks
const linkIDref = {
delphiInfo:"https://delphitechcorp.com/",
vrCityInfo:"https://vrcity.ca/",
auroraInfo:"https://auroraaerial.aero",
virbelaURL:"https://virbela.com",
amazonURL:"https://amazon.com",
moodleURL:"https://moodle.org",
xPlaneURL:"https://x-plane.com",
wordpressURL:"https://wordpress.org",
gitHub:"https://github.com",
googleMeet:"https://meet.google.com",
slack:"https://slack.com",
wrike:"https://wrike.com",
airbus:"https://airbus.com",
boeing:"https://boeing.com",
lockheedMartin:"https://lockheedmartin.com",
rtx:"https://rtx.com",
geAviation:"https://geaviation.com",
safran:"https://safran-group.com",
leonardo:"https://leonardocompany.com",
baseSystems:"https://baesystems.com"
}
//use key-values to populate the dynamic hyperlink functionality.
jQuery(".link").click(function(){
$linkID = $(this).attr("id");
window.location.href=linkIDref[$linkID];
})
$( function() {
$( ".groups" ).draggable();
} );
$( function() {
$( ".groups" ).resizable();
} );
body{
font-family: Arial, Helvetica, sans-serif;
font-size:1em;
background-color: skyblue;
}
h1{
text-align:center;
}
div:not(.ui-resizable-handle){ /* Added an exception to your generic rule */
border: black solid 2px;
border-radius:10px;
}
#main{
width:100%;
height: fit-content;
border:none;
}
#dashboard{
margin:auto auto auto auto;
display:grid;
border:none;
grid-template-columns: auto auto;
column-gap: 1em;
row-gap: 1em;
width:100%;
height:fit-content;
}
#dateTime{
margin:1em auto 1em auto;
border: black solid 2px;
width:fit-content;
height:fit-content;
padding:1em;
font-size: larger;
font-weight: bolder;
background-color: snow;
}
.groups{
position: relative;
margin:auto auto auto auto;
width:35em;
min-width: 32.5em;
background-color: snow;
padding:0px;
overflow: hidden;
}
.groups h2{
position:relative;
top:-0.9em;
text-align:center;
background-color: blue;
color:white;
cursor:move;
}
ul{
list-style-type: none;
position:relative;
top:-0.5em;
}
#group1{
height:10em;
}
#group2{
height:10em;
}
.clickToShowBlock{
cursor:pointer;
display:none;
position:absolute;
top: 3.5em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock{
display:none;
position:absolute;
top: 4em;
left:12em;
height:fit-content;
width:20em;
border:none;
}
.hoverToShowBlock img{
max-height:6em;
max-width:19em;
}
dd{
padding: 0.5em 0em 0.5em 0em;
}
.showLinks{
display:none;
}
#showLinksButton{
position:absolute;
right:0.5em;
top:2em;
font-size:2em;
}
li:hover{
cursor:pointer;
}
dd:hover{
cursor:pointer;
}
#media screen and (max-width: 1200px)
{
#dashboard{
grid-template-columns: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"><!-- Added the jQuery-ui CSS file -->
<link rel="stylesheet" href="stylesheet2.css">
<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>Delphi Tech Corp Front-End Development Team Coding Test</title>
<script src="script2.js" defer></script>
</head>
<body>
<h1>TASK 2 Dashboard</h1>
<div id="main">
<div id = "dateTime"></div>
<div id = "dashboard">
<div id="group1" class = "groups">
<h2 id="group1h2">Group 1 - Alan Zheng's Companys + Products</h2>
<ul>
<li class="clickToShow" title = "vrCityInfo">VR City</li>
<li class="clickToShow" title = "delphiInfo">Delphi Tech Corp</li>
<li class="clickToShow" title = "auroraInfo">Aurora Aerial</li>
</ul>
<div id="vrCityInfo" class="clickToShowBlock link">
VR City is a virtual aviation training company. Our virtual community provides people with the learning tools to learn how to fly.
<br>
https://vrcity.ca/
</div>
<div id="delphiInfo" class="clickToShowBlock link">
Delphi Technology Corp is integrating new technologies such as augmented reality and virtuality into the aerospace and aviation industries!
<br>
https://delphitechcorp.com/
</div>
<div id="auroraInfo" class="clickToShowBlock link">
Aurora Aerial offers custom drone manufacturing. We develop both drone hardware and software.
<br>
https://auroraaerial.aero
</div>
</div>
<div id="group2" class = "groups">
<h2 id="group2h2">Group 2 - Technology products used at Delphi</h2>
<ul>
<li class="hoverToShow link" title= "virbela" id= "virbelaURL">Virbela</li>
<li class="hoverToShow link" title= "amazon" id= "amazonURL">Amazon</li>
<li class="hoverToShow link" title= "moodle" id= "moodleURL">Moodle</li>
<li class="hoverToShow link" title= "xPlane" id= "xPlaneURL">X-Plane</li>
<li class="hoverToShow link" title= "wordpress" id= "wordpressURL">Wordpress</li>
</ul>
<div id="virbela" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/5fab9393da4ffe1e20d14cc6_virbela-logo-black-website.png">
</div>
<div id="amazon" class="hoverToShowBlock">
<img alt="Amazon" src="Logos/NicePng_amazon-png_197561.png">
</div>
<div id="moodle" class="hoverToShowBlock">
<img alt="Moodle" src="Logos/moodle_logo_small.svg">
</div>
<div id="xPlane" class="hoverToShowBlock">
<img alt="X-Plane" src="Logos/x-plane-logo.svg">
</div>
<div id="wordpress" class="hoverToShowBlock">
<img alt="Virbela" src="Logos/NicePng_wordpress-logo-png_395752.png">
</div>
</div>
<div id="group3" class = "groups">
<h2 id="group3h2">Group 3 - Websites used at Delphi</h2>
<ul>
<dt>GitHub</dt>
<dd class="showLinks link" id="gitHub">https://github.com</dd>
<dt>Google Meet</dt>
<dd class="showLinks link" id="googleMeet">https://meet.google.com</dd>
<dt>Slack</dt>
<dd class="showLinks link" id="slack">https://slack.com</dd>
<dt>Wrike</dt>
<dd class="showLinks link" id="wrike">https://wrike.com</dd>
</ul>
<button id="showLinksButton">Show Links</button>
</div>
<div id="group4" class = "groups">
<h2 id="group4h2">Group 4 - Aerospace Companies</h2>
<ul id="aviationLinks">
<li class = "cycle link" id="airbus">airbus.com</li>
<li class = "cycle link" id="boeing">boeing.com</li>
<li class = "cycle link" id="lockheedMartin">lockheedmartin.com</li>
<li class = "cycle link" id="rtx">rtx.com</li>
<li class = "cycle link" id="geAviation">geaviation.com</li>
<li class = "cycle link" id="safran">safran-group.com</li>
<li class = "cycle link" id="leonardo">leonardocompany.com</li>
<li class = "cycle link" id="baseSystems">baesystems.com</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Issue with selector in Ajax result using jQuery

I have a page that contains some cube...
When user click on the cubes, the cube's width and height will change and the related content will fetch using Ajax.
The Ajax result is another html page itself, that have some jQuery commands.
Please look at the result page:
HTML:
<div id="wrapperProducts">
<div class="products" id="mainContent">
</div><!-- # mainContent -->
<div class="products" id="rightPanel">
</div><!-- # rightPanel -->
<div class="products" id="footerPanel">
<div class="arr" id="arrowRightFooter">
<img src="images/arrows/light/arrowRight.png" width="30" height="30" alt=""/>
</div><!-- # arrowRightFooter -->
<div id="thumbWrapper">
<div class="thumb" id="t1">
</div><!-- # t1 -->
<div class="thumb" id="t2">
</div><!-- # t2 -->
<div class="thumb" id="t3">
</div><!-- # t3 -->
<div class="thumb" id="t4">
</div><!-- # t4 -->
<div class="thumb" id="t5">
</div><!-- $ t5 -->
<div class="thumb" id="t6">
</div><!-- # t6 -->
<div class="thumb" id="t7">
</div><!-- # t7 -->
<div class="thumb" id="t8">
</div><!-- # t8 -->
<div class="thumb" id="t9">
</div><!-- # t9 -->
</div><!-- # thumbWrapper-->
<div class="arr" id="arrowLeftFooter">
<img src="images/arrows/light/arrowLeft.png" width="30" height="30" alt=""/>
</div><!-- # arrowLeftFooter -->
</div><!-- # footerPanel -->
and CSS:
div#logo div#wrapperProducts {
width:100%;
height:100%;
background:url(../images/27.jpg) no-repeat;
}
div#logo div#wrapperProducts div#mainContent {
left:0;
top:60px;
width:80%;
height:70%;
float:left;
/*background-color:red;*/
}
div#logo div#wrapperProducts div#rightPanel {
right:-10px;
top:0;
width:20%;
height:100%;
float:right;
position:absolute;
/*background-color:blue;*/
}
div#logo div#wrapperProducts div#footerPanel {
bottom:0;
left:0;
position:absolute;
width:80%;
height:30%;
/*background-color:#096;*/
}
div#logo div#wrapperProducts div#thumbWrapper {
width:90%;
height:100%;
margin:auto;
margin-right:5%;
overflow:hidden;
white-space:nowrap;
/*background-color:;*/
}
div#logo div#wrapperProducts div#thumbWrapper .thumb {
width:170px;
height:100%;
margin-right:2px;
right:0;
display:inline-block;/*inline-block*/
position:relative;
direction:rtl;
background: linear-gradient(rgba(255,255,255, 0.2), rgba(255,255,255, 0) );
background-color:transparent;
}
div#logo div#wrapperProducts div#footerPanel div.arr {
position:absolute;
width:30px;
height:30px;
cursor:pointer;
}
div#logo div#wrapperProducts div#footerPanel #arrowRightFooter {
right:0;
bottom:50%;
}
div#logo div#wrapperProducts div#footerPanel #arrowLeftFooter {
left:0;
bottom:50%;
}
div#logo is the main page element`
and JS:
$(document).ready(function(e) {
/*"use strict";*/
$('#logo').css({'background':'none'});
$('#arrowRightFooter').click( function(){
console.log('The click button work fine');
$('.thumb').animate({left: '+=170px' }, 1500);
});
});
This lines are #logo's structure in main page:
HTML:
<div class="parts" id="part1">
<div class="third" id="left">
<div class="mostatil radif1" id="logo">
<div class="imgWrapper">
<img src="images/icons/new/basketStore.png" width="120" height="90" alt=""/>
</div>
</div>
<div>
</div>
CSS:
body {
background:url(../images/background.png) no-repeat;
background-color:rgb(24,1,83);
font-family:"B Koodak", Tahoma;
}
div.parts {
width:620px;
height:800px;
position:absolute;
}
div#part1 {
margin-left:150px;
}
div.third {
width:510px;
height:640px;
margin-top:100px;
}
div#left {
margin-left:55px;
}
div.third div.mostatil {
width:250px;
height:120px;
}
div.third#left div.radif1 {
margin-top:0px;
}
div#logo {
background-color:rgb(214,164,1);
position:absolute;
cursor:pointer;
}
and *jQuery: *
/*/------------- C L I C K ON DIV # L O G O --------------/*/
$(document).on('click', 'div.mostatil#logo', function(){
$('div.moraba, div.mostatil').not('#logo').delay(500).fadeOut('fast');/**/
var detail = {};
detail.id = $(this).attr('id');
detail.class = $(this).attr('class').substr(7);
$(this)
.animate({
width: WinWidth,
height: WinHeight,
marginTop: -60,
marginLeft: -210
}, 100, 'easeOutQuint', false)
.data({ id: detail.id, class: detail.class})
.css({'z-index':500, 'cursor':'default'})
.transition({rotateY:'360deg'}, 1000,'snap');
$('body').css('overflow','hidden');
$.ajax({
type:'POST',
url:"pages/Ajax/products.php",
beforeSend: function() {
$('#logo').html('LOADING; PLEASE WAIT...')
},
statusCode: {
404: function(){
$(this).html('Page not found');
}
},
success: function(result) {
$('#logo').html(result);
}
});//Ajax
});
When I select other elements of result page like wrapperProduct or mainContent or etc..., the animate method works fine, but just in $('.thumb'), there is no result after click on arrow divs...
I think there is something wrong in my css, may be with whitespace:nowrap, because it's first time I'm using this command...
I believe it's because of misunderstanding CSS concepts by me...
Please guide me to the write way and help to figure out my fault...
Thanks in advance...

Actually there's issue with AJAX...
There is not any thing wrong with selectors,
you've defined that the application send an Ajax request to the server and insert the HTML result in this div again with every click on div.mostatila#logo...!!!
So,
when you click on every place inside the page, you are clicking on the #logo in fact...
you have to limit the Ajax request to a situation, for example:
if ( $(this).css('width') == '250px' ) {
$.ajax({
type:'POST',
url:"pages/Ajax/products.php",
beforeSend: function() {
$('#logo').html('LOADING; PLEASE WAIT...')
},
statusCode: {
404: function(){
$(this).html('Page Not Found...');
}
},
success: function(result) {
$('#logo').html(result).css('background','none');
}
});//Ajax
}
else {
return;
}
then, when the #logo have width:250px, Ajax request will sent...
I think this is the problem...

Animated DropDown Div Panel with Javascript

Thanks in advance for any possible help.
Basically I was looking to create drop down div panels that are activated by a function toggleSlider, where the panels are hidden when the page is initially loaded. The first two links "resume" and "work" function like I had hoped, where you click on one and the corresponding div drops in, and when you click on the same link again or one of the other links the content is retracted. The third link is not working like the others, when you click on it the corresponding div drops in covering the other contents, and can only be retracted on by clicking on the same link again. Here's what it looks like....
http://www.visuallypersuasive.com/jason/test.html#
And here is the javascript
function toggleSlider() {
if ($("#panelThatSlides").is(":visible")) {
$("#contentThatFades").fadeOut(600, function(){
$("#panelThatSlides").slideUp();
});
}
if ($("#panelThatSlides2").is(":visible")) {
$("#contentThatFades2").fadeOut(600, function(){
$("#panelThatSlides2").slideUp();
});
}
else {
$("#panelThatSlides").slideDown(600, function(){
$("#contentThatFades").fadeIn();
});
}
}
function toggleSlider2() {
if ($("#panelThatSlides2").is(":visible")) {
$("#contentThatFades2").fadeOut(600, function(){
$("#panelThatSlides2").slideUp();
});
}
if ($("#panelThatSlides").is(":visible")) {
$("#contentThatFades").fadeOut(600, function(){
$("#panelThatSlides").slideUp();
});
}
else {
$("#panelThatSlides2").slideDown(600, function(){
$("#contentThatFades2").fadeIn();
});
}
}
function toggleSlider3() {
if ($("#panelThatSlides3").is(":visible")) {
$("#contentThatFades3").fadeOut(600, function(){
$("#panelThatSlides3").slideUp();
});
}
if ($("#panelThatSlides2").is(":visible")) {
$("#contentThatFades2").fadeOut(600, function(){
$("#panelThatSlides2").slideUp();
});
}
if ($("#panelThatSlides").is(":visible")) {
$("#contentThatFades").fadeOut(600, function(){
$("#panelThatSlides").slideUp();
});
}
else {
$("#panelThatSlides3").slideDown(600, function(){
$("#contentThatFades3").fadeIn();
});
}
}
And here is the html
<div id="resume"><a class="nav" href="#" onclick="toggleSlider();">resume</a>
<div id="panelThatSlides" style="position:relative; left:250px; display:none;
background:#eee; width:950px; height:500px;">
<div id="contentThatFades" style="position:relative; left:00px; display:none;
background:#fff; width:950px; height:500px;">content</div>
</div>
</div>
<div id="work"><a class="nav" href="#" onclick="toggleSlider2();">work</a>
<div id="panelThatSlides2" style="position:relative; left:-420px; display:none;
background:#eee; width:950px; height:500px;">
<div id="contentThatFades2" style="position:relative; left:00px; display:none;
background:#fff; width:950px; height:500px;">mucho content</div>
</div>
</div>
<div id="contact"><a class="nav" href="#" onclick="toggleSlider3();">contact</a>
<div id="panelThatSlides3" style="position:relative;left:-550px; display:none;
background:#eee; width:950px; height:500px;">
<div id="contentThatFades3" style="position:relative; left:00px; display:none;
background:#fff; width:950px; height:500px;">mucho mass content</div>
</div>
</div>
While I feel I have a solid basic to intermediate understanding html and css, javascript is pretty much Greek to me. Ideally I would like use this technique to nest another drop down div within the work link/div with more than three links if I could get this to work.
Thanks again to anyone who can help.

Test It I make a little change on Your Code
HTML:
<div class="navbar">
<div id="resume" class="navmenu"><a class="nav" href="#" >resume</a>
<div class="panelThatSlides" style="position:relative; left:250px; display:none; background:#eee; width:950px; height:500px;">
<div class="contentThatFades" style="position:relative; left:00px;display:none; background:#fff; width:950px; height:500px;">content</div>
</div>
</div>
<div id="work" class="navmenu"><a class="nav" href="#" >work</a>
<div class="panelThatSlides" style="position:relative; left:-420px;display:none; background:#eee; width:950px; height:500px;">
<div class="contentThatFades" style="position:relative; left:00px;display:none; background:#fff; width:950px; height:500px;">mucho content</div>
</div>
</div>
<div id="contact" class="navmenu"><a class="nav" href="#" >contact</a>
<div class="panelThatSlides" style="position:relative;left:-550px;display:none;background:#eee; width:950px; height:500px;">
<div id="contentThatFades" style="position:relative; left:00px; display:none;background:#fff; width:950px; height:500px;">mucho mass content</div>
</div>
</div>
</div>
js That Must Put it After Html code
$(".navbar").find(".nav").bind("click",function(e){
if($(e.target.parentNode).find(".panelThatSlides").is(":visible")){
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").fadeOut(600, function(){
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").find(".contentThatFades").slideUp();
});
}
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").fadeOut(600, function(){
$(e.target.parentNode.parentNode).find(".navmenu").find(".panelThatSlides").find(".contentThatFades").slideUp();
});
$(e.target.parentNode).find(".panelThatSlides").slideDown(600, function(){
$(e.target.parentNode).find(".panelThatSlides").find(".contentThatFades").fadeIn();
});
return false;
});
now You Can Add Nav Without Problem

Converting a div with li elements containing image tags to a slideshow

I have markup that looks like this <div class="myDiv"><ul>
<li><img src="img1.jpg"/></li>
<li><img src="img1.jpg"/></li>
.
.
.
</ul></div>
I need to convert this html to a slideshow. I am not very good at using javascript or jquery. I just need a something that would enable me to pass the class of the div and then all the images in the lists would be converted to a simple slideshow. Thanks in anticipation

Hiya please try this demo http://jsfiddle.net/NPcDH/ || http://jsfiddle.net/rQS6h/ perhaps & further from below comments your personal page demo is here - http://jsfiddle.net/2wnws/2/show/
its a simple slideshow using li rest you can see how it works in jsfiddle. Please let me know if I missed anything.
html
<div id="slideshow">
<ul>
<li class="slideshow_item">
<img src="http://www.google.com/logos/2011/persiannewyear11-hp.jpg" alt="persiannewyear11-hp" />
</li>
<li class="slideshow_item">
<img src="http://www.google.com/logos/2011/holi11-hp.jpg" alt="holi11-hp" />
</li>
<li class="slideshow_item">
<img src="http://www.google.com/logos/2011/sayeddarwish11-hp.jpg" alt="sayeddarwish11-hp" />
</li>
<li class="slideshow_item">
<img src="http://www.google.com/logos/2011/okamoto11-hp.jpg" alt="okamoto11-hp" />
</li>
<li class="slideshow_item">
<img src="http://www.google.com/logos/2011/eisner11-hp.jpg" alt="eisner11-hp" />
</li>
<li class="slideshow_item">
<img src="http://www.google.com/logos/2011/jfkinaugural11-hp.jpg" alt="jfkinaugural11-hp" />
</li>
</ul>
</div> 
Jquery
/* home slide show */
var slide_pos = 0;
var slide_len = 0;
$(document).ready(function() {
slide_len = $(".slideshow_item").size() - 1;
$(".slideshow_item:gt(0)").hide();
slide_int = setInterval(function() {
slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
slide_cur.fadeOut(2000);
slide_pos = (slide_pos == slide_len ? 0 : (slide_pos + 1));
slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
slide_cur.fadeIn(2000);
}, 5000);
});
css
#slideshow{
position:relative;
top:0;
left:0;
} #slideshow ul, #slideshow li{
margin:0;
padding:0;
list-style-type:none;
} .slideshow_item{
position:absolute;
left:0;
top:0;
list-style-type:none;
} .slideshow_item img{
margin:0;
padding:0;
vertical-align:bottom;
}

We Keep Coding

JavaScript is the programming language of the Web.

Creating a marquee using anything? Javascript, Jquery, CSS - javascript

The NSE site is using custom-stock-ticker (A Word Press Plugin). A good place to start there is looking at stock_ticker_script.js.

Related

how can I change the background image when I click on a color?

Jquery .resizable function - resize icon not displaying properly

Issue with selector in Ajax result using jQuery

Animated DropDown Div Panel with Javascript

Converting a div with li elements containing image tags to a slideshow

Categories

Resources