I'm wanting to make my own small webpage, I've got a domain Saoo.eu
As you see there is a small play button in the corner witch plays a playlist. Is there anyway to have that playbutton on each page I'd add in the future without resetting every time the page changes?
Am I forced to use iFrames for that?
This is my player code
<button id="audioControl" style="width:30px;height:25px;"></button>
<audio id="aud" src="" autoplay autobuffer />
Script:
$(document).ready(function() {
$('#audioControl').html('II');
if(Modernizr.audio && Modernizr.audio.mp3) {
audio.setAttribute("src",'http://daokun.webs.com/play0.mp3');
} else if(Modernizr.audio && Modernizr.audio.wav) {
audio.setAttribute("src", 'http://daokun.webs.com/play0.ogg');
}
});
var audio = document.getElementById('aud'),
count = 0;
$('#audioControl').toggle(
function () {
audio.pause();
$('#audioControl').html('>');
},
function () {
audio.play();
$('#audioControl').html('II');
}
);
audio.addEventListener("ended", function() {
count++;
if(count == 4){count = 0;}
if(Modernizr.audio && Modernizr.audio.mp3) {
audio.setAttribute("src",'http://daokun.webs.com/play'+count+'.mp3');
} else if(Modernizr.audio && Modernizr.audio.wav) {
audio.setAttribute("src", 'http://daokun.webs.com/play'+count+'.ogg');
}
audio.load();
});
Related
Have two functions in my index.php file, they work fine, but will only execute the last one. They work fine when one is commented out or the order is swapped, my question is how can I get them to both run if this is possible.
// ************************* Scroll Up Button *************************
// Get the button
var mybutton = document.getElementById("scrollTopBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()
console.log('Scroll To Top Button');
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollTopBtn.style.display = "block";
} else {
scrollTopBtn.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
// ********************** Sticky navbar **********************************
window.onscroll = function() {stickyHeaderScroll()};
var header = document.getElementById("navBack");
var sticky = header.offsetTop;
function stickyHeaderScroll() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
For the example above the navbar will remain sticky but the scroll to top button won't appear, if I swap the code then scroll button will appear and work but navbar won't remain sticky. I've tried adding the sticky navbar code into the navbar.php, but still get the same problem.
I know I'm missing something really obvious here, but the other answers I've looked at don't seem to work.
You can add both function at once
// ************************* Scroll Up Button *************************
// Get the button
var mybutton = document.getElementById("scrollTopBtn");
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block"; // here was used worng object
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
// ********************** Sticky navbar **********************************
var header = document.getElementById("navBack");
var sticky = header.offsetTop;
function stickyHeaderScroll() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
if(typeof scrollFunction === "function") {
scrollFunction();
}
if(typeof stickyHeaderScroll=== "function") {
stickyHeaderScroll();
}
console.log('Scroll To Top Button');
};
or use window.addEventListener('scroll', functionName)
window.addEventListener('scroll', scrollFunction);
window.addEventListener('scroll', stickyHeaderScroll);
Hello i have this code which works for redirect back
Redirect Users leaving your site - Javascript back button hack
<?php
$javascript = <<<DOC
<script>
var ref = document.referrer;
var siteurl = "YOUR URL HERE";//if you have www, then use www. http://www.yoursite.com
if (ref.indexOf(siteurl)!= -1){
}
else{
(function(window, location) {
history.replaceState(null, document.title, location.pathname+"#!/auth");
history.pushState(null, document.title, location.pathname);
window.addEventListener("popstate", function() {
if(location.hash === "#!/auth") {
history.replaceState(null, document.title, location.pathname);
setTimeout(function(){
location.replace("http://www.blackhatworld.com/");
},0);
}
}, false);
}(window, location));
}
</script>
DOC;
echo $javascript;
?>
I want to add it a counter that will only redirect after 3 clicks on back.
How to do it?
try this javascript code :
<button id="button">Click Back 3 Times </button>
<script>
var counter = 0;
$("#button").click(function () {
counter++;
if (counter == 3) {
window.history.back();
}
});
</script>
This code also works but i need to add the counter
this code which works for redirect back Redirect Users leaving your site - Javascript back button hack:
<script>
// managage back button click (and backspace)
var count = 0; // needed for safari
window.onload = function () {
if (typeof history.pushState === "function") {
history.pushState("back", null, null);
window.onpopstate = function () {
history.pushState('back', null, null);
if(count == 1){window.location = 'http://google.co.il';}
};
}
}
setTimeout(function(){count = 1;},200);
</script>
Looking for a code to make redirect to page after clicking browser back button on the 3rd time... first 2 clicks should remain at the page
I am running the javascript function shoh() below on page load to hide div's. This works fine on html hard coded divs but appears not to be working on divs that are created via php. Am I correct in assuming that the javascript runs first before the php creates the divs and that is why they aren't being hidden? If so, is there any other way to hide these divs after they are created? They need to be shown by default in case javascript is disabled?
code which runs with onload:
<script type="text/javascript">
function closeAllDivs() {
shoh('g1');
shoh('g2');
shoh('g3');
shoh('g4');
}
</script>
<BODY onLoad="closeAllDivs();">
javascript to hide divs:
function shoh(id) {
if (document.getElementById) { // DOM3 = IE5, NS6
if (document.getElementById(id).style.display == "none"){
document.getElementById(id).style.display = 'block';
filter(("img"+id),'imgin');
} else {
filter(("img"+id),'imgout');
document.getElementById(id).style.display = 'none';
}
} else {
if (document.layers) {
if (document.id.display == "none"){
document.id.display = 'block';
filter(("img"+id),'imgin');
} else {
filter(("img"+id),'imgout');
document.id.display = 'none';
}
} else {
if (document.all.id.style.visibility == "none"){
document.all.id.style.display = 'block';
} else {
filter(("img"+id),'imgout');
document.all.id.style.display = 'none';
}
}
}
}
php code which creates divs:
for ($i=0; $i < count($this->items); $i++){
<div style="display: block;" id="g<? echo $i ?>">
... code that displays items
</div>
}
It shouldn't really matter so much whether the php made the divs or whether they're hardcoded - by the time the HTML hits the browser, it's already the same thing. The server processes the PHP - by the time it leaves the server and heads to the browser, there is no PHP anymore.
I'd recommend using window.onload instead of a <body onload="">
window.onload = function() {
closeAllDivs();
};
Thanks to Wolfman Joe for letting me know the problem was likely not with the order of things. This told me the shoh() function was likely failing and therefore interrupting execution... so the code to close the divs was never executed. The solution was to build a check into the shoh() function to first make sure the div existed before attempting to change its property. As it turns out, not all divs $i were being created.
function shoh(id) {
if (document.getElementById) { // DOM3 = IE5, NS6
if (document.getElementById(id)){
if (document.getElementById(id).style.display == "none"){
document.getElementById(id).style.display = 'block';
filter(("img"+id),'imgin');
} else {
filter(("img"+id),'imgout');
document.getElementById(id).style.display = 'none';
}
}
}
}
Is there a way to use jQuery to get an iframe to load on a click, i want this as is the iframe is hidden in a div that is not viewable until clicked, so the heavy majority of users will not be viewing the iframe, and i dont want the load time to be affected by the iframe.
This is one of the few things i've tried, the iframe does not load:
$(function() {
var emba=1;
var embget = 1;
$(".custemba").click(function(event) {
event.preventDefault(event);
if(emba == 1) {
emba = 2;
$('.custemb').slideDown();
if(embget == 2) {
$('.appendi').append('<iframe src="/player_i.php?aid=12" height="170px" width="100%" scrolling="no" frameborder="0"></iframe>');
embget = 2;
}
}
else if(emba == 2) {
emba = 1;
$('.custemb').slideUp();
}
});
});
Looks like
if(embget == 2)
should be
if(embget == 1)
And you don't need that extra event in
event.preventDefault();
Here's a simplified version:
var appendIFrame = true;
$(".custemba").click(function(event) {
event.preventDefault();
$('.custemb').slideToggle();
if(appendIFrame) {
$('.appendi').append('<iframe src="/player_i.php?aid=12" height="170px" width="100%" scrolling="no" frameborder="0"></iframe>');
appendIFrame = false;
}
});
The following works for me, a tad cleaner, creating the object before appending:
HTML:
<div>
Show iFrame
</div>
<div class="framebox"></div>
JS:
var frame_loaded = false;
$(".showframe").click(function(event) {
event.preventDefault();
if (frame_loaded === false) {
var frame_element = $('<iframe>');
frame_element.attr({
src: "http://eatabagofdicks.com",
height: "170px",
width: "100%",
scrolling: "no",
frameborder: "0"
});
$(".framebox").append(frame_element);
frame_loaded = true;
}
$(".framebox").slideToggle();
});
I'm working with phpbb3 template now, and I want entire rows to be links to forums/topics. I tried making it without any scripts, but i feel it's too much messing up with the code.
Now I'm using
<tr onclick="window.location.href=http://example.com" />
but I want the link also open up in new tab on scroll click. Is there any method to attach window.open function to scroll click?
If you're using jQuery:
$("tr").mousedown(function(e) {
if(e.which == 2)
{
window.location = $(this).attr("onclick").replace('window.location.href=','');
}
} );
Plain ol' javascript:
document.onclick = function(e)
{
if(e.which == 2 && e.target.tagName == 'TR')
{
var loc = e.target.getAttribute('onclick').replace('window.location.href=','');
window.location = loc;
}
}