It was working until I add document.getElementById("frame").src="https://www.youtube.com/embed/"+frm; line
But now even if I delete this part so make code like how it used to be and working fine, it still doesnt work. I have no idea if why it is like this. It might be a little detail which is I am missing now. Any ideas to find what it is ?
Also, I have tried to load <p></p> texts from a XML file but couldn't find a way for this too. It would be nice, if someone could help me to find a right method for this
function bgClicked2 (idJ,pg,frm)
{
var id = document.getElementById("bgMAIN");
id.src="Pics/bgCLICKED2.png";
var id2=document.getElementById("previews");
id2.style.visibility="visible";
document.getElementById("planet").src="Pics/"+idJ+".png";
document.getElementById("frame").src="https://www.youtube.com/embed/"+frm;
}
function bgClicked()
{
var id,prg,frame;
id=document.activeElement.id;
frame=document.activeElement.name;
bgClicked2(id,"j",frame);
alert("ughjnj");
loadXMLDoc();
}
p, li{
font-size:17px;
font-style:normal;
color:#066;
position:relative;
float:right;
word-wrap:break-word;
width:651px;
margin-left:35px;
}
.button{
position:absolute;
margin-left:453px;
margin-top:315px;
z-index:2;
border-radius:50%;
border:none;
size:50px;
width:83px;
height:89px;
opacity:0;
}
<center>
<div class="upper"><img src="Pics/logo.png" width="75%" height="75%"/></div>
<!--//<div><img src="Pics/2_.png" style="right:9px; top:12 position:relative;" /></div>-->
<div class="spaceBoard">
<input type="button" class="button" onclick="bgClicked() " id="sun" name="piuKlpJmjfg"/>
<input type="button" class="world" onclick="j()" id="earth" name="pm7tfLvHmXA">
<img src="Pics/bgMAIN2.png" id="bgMAIN">
<span id="previews" class="previews">
<img src="Pics/sun.png" width="255" height="255" id="planet"/>
<img src="Pics/back.png" width="39" height="39" style="float:right; margin-left:11" id="btnOut"/>
<table style="float:right">
<tr>
<th><p id="paragraph">The sun is a star, a hot ball of glowing gases at the heart of our solar system. Its influence extends far beyond the orbits of distant Neptune and Pluto. Without the sun's intense energy and heat, there would be no life on Earth. And though it is special to us, there are billions of stars like our sun scattered across the Milky Way galaxy. If the sun were as tall as a typical front door, the Earth would be the size of a U.S. nickel. The temperature at the sun's core is about 27 million degrees Fahrenheit. Average diameter: 864,000 miles, about 109 times the size of the Earth.Rotation period at equator: About 27 days. Rotation period at poles: About 36 days. Surface temperature: 10,000 degrees Fahrenheit.Composition: Hydrogen, helium.</p></th>
</tr>
<tr>
<th><iframe id="frame" width="651" height="405" src="https://www.youtube.com/embed/piuKlpJmjfg" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe></th>
</tr>
</table>
</span>
</div>
This looks like a browser cache issue. Try opening in incognito(private) mode or hard refresh using “Ctrl + F5”
Related
I want to finish this project I was working on for my mom for Valentine's day.
I want to be able to click an h2 and have it trigger multiple events, for example making the background color green, changing the font size of h2 to something bigger like 50px and changing the font size of h1 to 50px
I've never triggered multiple events at the same time from an onclick event. I'd love assistance to make mom happy.
body {
background-color: lightblue;
}
<html>
<body>
<h1 style="color:purple;
text-align:center;" onclick="this.style.color='yellow'; this.style.fontSize='40px'; document.body.style.backgroundColor='green';">
Happy Valentines Day Mom!
</h1>
<img src="Source/me.jpg" alt="This is Me" width="300" height="300" align="middle">
<p align="center" style="color:white;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='';">
Lots of love and wishes on this day. It is not possible to repay the love that you have given to me. I just can love you, dear mom. Take my lots of love on this Happy Valentine's Day.
</p>
<img src="source/mom.jpg" alt="Mom" width="200" height="200" align="middle">
<h1 style="color:blue;
text-align:center;" onclick="this.innerHTML='Best Mother Ever!';">
I love you so much! - J
</h1>
<br>
<h2 id="joke" align="center" style="color:white;" onmouseover="this.style.textDecoration='line-through';" onmouseout="this.style.textDecoration='';">P.S. I love you more!</h2>
<button type="button" onclick='document.getElementById("joke").innerHTML = "P.S.S. you are the best!"'>Click Me!</button>
</body>
</html>
I think it would be best to work with style using a CSS file.
Create a CSS file and set some classes like:
h2.valentines {
background-color: green;
font-size: 50px;
color: white;
}
Then on the onclick event you can pass a function to add the class to the element you want, just like this:
function addValentineClass() {
const element = document.getElementById('joke');
element.className = "valentines";
}
I've got an accordion that when you click on each button it expands out and displays further info. It works fine, however each time i click each button to expand it, the box seems to slide up and down like 7/8 times before displaying the content box. I would only ideally like it slide up and down twice or 3 times max before showing the full content. How would be the best way to achieve this.
HTML:
<div id="ss_menu">
<h3><b>Winning Ways</b></h3>
<div class="ss_button">1990-1991</div>
<div class="ss_content">1st NBA Title<br />
61 Wins 21 Losses<br />MVP Michael Jordan<br />
Defeated LA Lakers<br /></div>
<div class="ss_button">1991-1992</div>
<div class="ss_content">Repeat Champions<br />
67 Wins 15 Losses<br />MVP Michael Jordan<br />
<div class="ss_button">1992-1993</div>
<div class="ss_content">ThreePeat Champions<br />57 Wins 25 Losses<br />
MVP Michael Jordan<br />Defeated Phoenix Suns<br /></div>
<div class="ss_button">1995-1996</div>
<div class="ss_content">1st NBA Title in 3 years<br />
72 Wins 10 Losses<b>(NBA history)</b><br />MVP Michael Jordan<br />
<b>*Michael Jordan came back from retirement!</b><br />Defeated LA
Lakers<br /></div> <div class="ss_button">1996-1997</div>
<div class="ss_content">2nd Repeat<br />69 Wins 13 Losses<br />
MVP Michael Jordan<br />Defeated Utah Jazz<br /></div>
<div class="ss_button">1997-1998</div> <div class="ss_content">
2nd ThreePeat<br />62 Wins 20 Losses<br />MVP Michael Jordan<br />
Defeated Utah Jazz<br /></div>
</div>
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
}
#ss_menu h3{
color: white;
}
#ss_menu {
width: 200px;
position:absolute;
right:10px;
top:825px;
z-index:1
}
.ss_button {
background-color: black;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
padding: 10px;
color: #FFFFFF;
border-radius: 5px;
}
.ss_content {
background-color: #EFEFEF;
display: none;
padding: 10px;
border-radius: 5px;
}
JS:
jQuery(function () {
jQuery('.ss_button').on('click', function () {
jQuery('.ss_content').slideUp('fast');
jQuery(this).next('.ss_content').slideDown('fast');
});
});
You are using a br instead of div closure in the contents of 1991-1992.
The problem is always Michael Jordan. Check https://jsfiddle.net/VixedS/jbz6dxbp/ your code works good. It's weird, but works.
<div class="ss_button">1991-1992</div>
<div class="ss_content">Repeat Champions<br />
67 Wins 15 Losses<br />MVP Michael Jordan
</div>
Your code is works fine. It's weird problem. You could use preventDefault() function. See if that works.
jQuery('.ss_button').on('click', function (event) {
event.preventDefault();
jQuery('.ss_content').slideUp('fast');
jQuery(this).next('.ss_content').slideDown('fast');
});
It's possible that you are attaching the event handler more than once? (because window resizing handling, ajax loadding & adding elements or something similar)
A simple test: add a "processed" class to your ".ss_buttons" just after attaching the click, and use as selector ".ss_button:not(.processed)" .
jQuery(function () {
jQuery('.ss_button:not(.processed)').on('click', function () {
jQuery('.ss_content').slideUp('fast');
jQuery(this).next('.ss_content').slideDown('fast');
});
jQuery('.ss_button:not(.processed)').addClass('processed')
});
EDIT: and the html have also a problem as vixed pointed:
<div id="ss_menu">
<h3><b>Winning Ways</b></h3>
<div class="ss_button">1990-1991</div>
<div class="ss_content">
1st NBA Title<br />
61 Wins 21 Losses<br />MVP Michael Jordan<br />
Defeated LA Lakers<br />
</div>
<div class="ss_button">1991-1992</div>
<div class="ss_content">
Repeat Champions<br />
67 Wins 15 Losses<br />
MVP Michael Jordan<br />
***** <-- Should'nt be here a "</div>"
<div class="ss_button">1992-1993</div>
<div class="ss_content">
ThreePeat Champions<br />
...
</div>
Please use smooth accordion as explained here in this link.
https://jqueryui.com/accordion/
I have the following HTA using VBScript to copy a folder from one source folder to a destination folder. I also have a, so far not working, progress bar made in CSS and JavaScript to show the progress. The script is copying the folder succesfully, but I have not found a way to show the progress.
I need to find a way to show the actual progress in the progress bar when copying the folder. I have tried with various methods using the statement For Each File In Folder but without luck.
I know there are other methods of showing a progress bar, i.e the Windows progress bar, but I would like to use my own.
The following code samples are in one HTA, but I've dividede the sciprts up for better overview. Hope that helps.
The following code is the acutal copy folder VBScript:
<script language="vbscript">
Sub Setup
Dim FSO, NewFile, ThisFile
Set FSO = CreateObject("Scripting.FileSystemObject")
FolderDir = FSO.GetFolder("..\")
dim WSHShell, desktop, pathstring, objFSO
set objFSO = CreateObject("Scripting.FileSystemObject")
Set WSHshell = CreateObject("WScript.Shell")
desktop = WSHShell.SpecialFolders("Desktop")
Destination = objFSO.GetAbsolutePathName(desktop)
Source = "C:\Test\Source"
FSO.CopyFolder ""&Source&"", ""&Destination&"\", True
End Sub
Sub CloseApp
Self.Close
End Sub
</script>
The copy script is triggered by the onClick on an image in the HTA script:
<HTA:APPLICATION ApplicationName="UPDATE" CAPTION="NO" SCROLL="NO" INNERBORDER="NO" SINGLEINSTANCE="YES" ICON="../images/icon_64.ico" ShowInTaskbar="YES">
<body onload="progressbar(100,75);">
<table cellpadding=0 cellspacing=0 width="100%">
<tr>
<td id="top_bar" height="25" width="100%" align="center">INSTALLATION</td>
</tr>
<tr>
<td align="center">
<br>
<b>Do you want to install the program?</b><br>
<br>
<div style="width:150px">
<div id="slider" align="left">
<div id="sliderbar" ></div>
<div id="progress" align="center"></div>
</div>
</div>
<br>
<img src="../images/installer.png" onclick="Setup()">  <img src="../images/afslut.png" onclick="CloseApp()">
<br>
</td>
</tr>
</table>
</script>
</body>
Furthermore I have a progress bar, which is made in CSS and JavaScript:
<style>
#slider{
width:100%;
height:12px;
border:1px solid #000;
overflow:hidden;
background: #FFF;
}
#sliderbar{
width:37%;
height:12px;
border-right: 1px solid #000;
background-color: #66FF33;
}
#progress {
font-family: Arial;
font-size: 10px;
font-weight: bold;
position: relative;
top: -15px;
}
</style>
<script language="JavaScript">
function progressbar(XX, YY){
var progress=Math.round((YY*100)/XX);
document.getElementById("sliderbar").style.width=progress+'%';
document.getElementById("progress").innerHTML=progress+'%';
document.title = progress+'% Installed';
}
</script>
I really hope that someone here can see an easy way to show use the progress bar. This is my last step in finishing a script, so I would be pleased if someone can help me out.
Thanks for reading!
first time asking a question here, so thank you in advance and please excuse me if I violate any rules. I'm trying to use this jquery pagination plugin from this site:
http://www.script-tutorials.com/how-to-create-easy-pagination-with-jquery/
and some how it's just not working with the jquery scrollbar plugin I'm using, which is from here:
http://manos.malihu.gr/jquery-custom-content-scroller/
Here's the code I'm working with, you'll see that the scrollbar plugin works on the first page, but after you click on any other subsequent pages it no longer functions:
var Imtech = {};
Imtech.Pager = function() {
this.paragraphsPerPage = 3;
this.currentPage = 1;
this.pagingControlsContainer = '#pagingControls';
this.pagingContainerPath = '#content';
this.numPages = function() {
var numPages = 0;
if (this.paragraphs != null && this.paragraphsPerPage != null) {
numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
}
return numPages;
};
this.showPage = function(page) {
this.currentPage = page;
var html = '';
this.paragraphs.slice((page-1) * this.paragraphsPerPage,
((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {
html += '<div>' + $(this).html() + '</div>';
});
$(this.pagingContainerPath).html(html);
renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
}
var renderControls = function(container, currentPage, numPages) {
var pagingControls = 'Page: <ul>';
for (var i = 1; i <= numPages; i++) {
if (i != currentPage) {
pagingControls += '<li>' + i + '</li>';
} else {
pagingControls += '<li>' + i + '</li>';
}
}
pagingControls += '</ul>';
$(container).html(pagingControls);
}
}
.scroll_container {
overflow: auto;
max-height: 100px;
}
body {
background: black;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
color: white;
}
.example {
background: #FFF;
width: 1000px;
font-size: 80%;
border: 1px #000 solid;
margin: 0.5em 10% 0.5em;
padding: 1em 2em 2em;
-moz-border-radius: 3px;
-webkit-border-radius: 3px
}
#content p {
text-indent: 20px;
text-align: justify;
}
#pagingControls ul {
display: inline;
padding-left: 0.5em
}
#pagingControls li {
display: inline;
padding: 0 0.5em
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="assets/imtech_pager.js"></script>
<!-- Add jquery scrollbar plugin -->
<link rel="stylesheet" href="assets/malihu-custom-scrollbar-plugin-master/jquery.mCustomScrollbar.css" />
<script src="assets/malihu-custom-scrollbar-plugin-master/jquery.mCustomScrollbar.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<section>
<div>
<div class="wrapper">
<h1>Deals</h1>
<div id="content" class="scroll_container scroll">
<div class="z">
Sergey LUKYANENKO - The Boy and the Darkness - Chapter 1. The Sun Kitten.
<h3>Xmas Special Menu</h3>
<div class="button">
Read More
</div>
</div>
<div class="z">
Everything happened because I got ill.
</div>
<div class="z">
It was already two in the afternoon, and I was lying in bed flicking through "Peter Pan" - I must have read it a hundred times over. I had long since pulled off the bandage my mother had tied around my neck in the morning, and thrown it into a corner. I simply can't understand - how can cotton wool soaked in vodka possibly help a cough? I don't argue with my mum, of course, but after she leaves I look after myself in my own way - namely, lie in bed with a book and wait for my germs to get tired of such a boring method of passing time. It usually helps - perhaps not at once, but after a day or three. A good thing, really, that the street outside looked quite miserable - the sun poking out for brief moments, only to make room for a patchy, nasty drizzle. Though, the sun never actually peeked into the room - our house is so unfortunately placed that it is in the shadows of the new nine-floor high-rises on every side. "The only use for such a flat is to grow mushrooms", - dad used to say, back when he still lived with us.
<div>
testing testing testing
</div>
</div>
<div class="z">
I put my book down on the floor next to the bed, and lay on my back. Perhaps, had I shut my eyes now, nothing would have happened. But there I was, lying staring at the ceiling and listening to the ticking of the clock in the hallway.
</div>
<div class="z">
And a speck of sunlight jumped into the room through the glass. Small - the size of my hand - but surprisingly bright. As though the window was open, with bright summer sun outside. Someone was probably playing with a mirror on the balcony of the house across the street.
</div>
<div class="z">
The rabbit floated across the ceiling, climbed down a wall, made a vase on the dressing-table glint, and stopped, shaking slightly, on my headrest.
</div>
<div class="z">
- Don't go, - I said for some reason, knowing that in a moment the mirror would shift and the rabbit would leave my room forever. - Stay...
</div>
<div class="z">
And that's when it all started.
</div>
<div class="z">
The sun rabbit tore free of the bed and floated in the air. I didn't even realise at first that such things don't happen. It was only when the flat spot hanging in the air started puffing out to form a fuzzy orange ball that I understood - a miracle had happened.
</div>
<div class="z">
Four paws stretched from orange glowing fur, followed by a tail and a head. Green cat eyes blinked and gazed at me steadily. And overall, in fact, the rabbit looked more like a kitten than anything else. Except he was hanging in the air, glowing, and seemed light as the fairy fluff that floats away if one blows gently.
</div>
<div class="z">
- Hello, - purred the kitten. - Thank you for the invitation.
</div>
<div class="z">
I closed my eyes for a second, but when I opened them again, the kitten hadn't disappeared. In fact, he'd flown closer.
</div>
<div class="z">
- I don't believe in fairy tales, - I told myself. - I'm grown up now.
</div>
<div class="z">
- Well, compared to the girl who was holding the True Mirror, you are quite grown up, - declared the kitten, unperturbed, and lowered himself onto the blanket. I glanced over - to see if there would be smoke - but everything seemed all right. I could feel warmth with my chest, but not strong. And the kitten tilted his head and added: - But one can't really call you adult, either. How old are you? Ten, maybe?
</div>
<div class="z">
- Fourteen, - I replied, finding myself calming down at such a mundane question. - Who're you?
</div>
<div class="z">
- A sun rabbit, - replied the kitten, examining himself curiously. - What an appearance.. do I look like one?
</div>
<div class="z">
- <b>Like</b> what?
</div>
<div class="z">
- Like a
<p style="font-weight:bold;color:red;">sun</p>
rabbit.
</div>
<div class="z">
- More like a kitten.
</div>
<div class="z">
- Hardly better, - stated the Kitten sadly and stretched out. And I didn't think of anything better than repeating:
</div>
<div class="z">
- Who're you?
</div>
<div class="z">
- But we have already arrived at a consensus! - said the Kitten with sudden hurt. - A sun rabbit, or more precisely - a kitten, because I look far more like one! What is there not to understand?
</div>
<div class="z">
I found myself tongue-tied. Well, naturally, a small green animal that eats stones would simply be - a small green stone-eater. Simple. And a sun rabbit is a sun kitten, because he looks nothing like a rabbit.
</div>
<div class="z">
- So you mean - any rabbit can come to life if one just calls it? - I asked cautiously. For some reason it seemed to me the Kitten would be hurt at the question again. But he just shook his head proudly:
</div>
<div class="z">
- As if! Any! Only True Light, reflected in a True Mirror, can come to life.
</div>
</div>
<div id="pagingControls">
</div>
</div>
</div>
</section>
</body>
<script type="text/javascript">
var pager = new Imtech.Pager();
$(document).ready(function() {
pager.paragraphsPerPage = 5; // set amount elements per page
pager.pagingContainer = $('#content'); // set of main container
pager.paragraphs = $('div.z', pager.pagingContainer); // set of required containers
pager.showPage(1);
$.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default
$(".scroll").mCustomScrollbar({theme:"light-2"}); //I have modified the theme light-2
$(".all-themes-switch a").click(function(e){
e.preventDefault();
var $this=$(this),
rel=$this.attr("rel"),
el=$(".content");
switch(rel){
case "toggle-content":
el.toggleClass("expanded-content");
break;
}
});
});
</script>
</html>
The rest is the files from the malihu jquery-custom-content-scroller
Thanks in advance!
Wrap the #content div within a new div and add the 'scroll_container' class to that. That should work.
jsfiddle
<div class="example">
<h3>Paragraph pagination sample</h3>
<div class="scroll_container">
<div id="content">
<div class="z">Sergey LUKYANENKO - The Boy and the Darkness - Chapter 1. The Sun Kitten.</div>
.....
</div>
</div>
<div id="pagingControls"></div>
</div>
I got this HTML
<div id="oops_menuHldrs"
style=" border-top:5px solid #ccc; position:absolute; width:100%; background:#343434; bottom:0px; left:auto;">
<div style="position:absolute; background:#343434; border-radius:10px; border:1px solid #CCC; right:0px; top:-20px; padding:5px;">
<table id="opps_menu_links" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span>About us black_text | black_text</span></td>
<td><span>Our Agents black_text | black_text</span></td>
<td><span>Contact us. black_text | black_text </span></td>
</tr>
</table>
</div>
Am told to, using jQuery, select all | and give them color red.
I tried something like:
$('#opps_menu_links').html(
$('#opps_menu_links').text()
.replace(/\|/,"<span style='color:#f00;'>|</span>"));
This converts everything to a single Red |
of course this without jQuery would otherwise be easy, just clothing each | with spans... but how would you do it using jQuery with as minimal codes as possible?
Any help?
Change your script as below
http://jsfiddle.net/xHasy/
$('#opps_menu_links').html($('#opps_menu_links').html( ).replace(/\|/g,'<span style="color:red;">|</span>'));
Everything is correct except you forgot to place global match parameter"g" in the regex:
.replace(/\|/g,
//-----------^----place this
final code should be:
$('#opps_menu_links').html(
$('#opps_menu_links').text()
.replace(/\|/g,"<span style='color:#f00;'>|</span>"));
//---------------^----------place here
Fiddle