|
JavaScript - First Attempt - Neeeed Help With Blogger Header!
Hello everyone!
I got this: <center><script type="text/javascript"> var imgs1 = new Array("http://img687.imageshack.us/img687/4438/kamslide3.jpg","http://img143.imageshack.us/img143/5968/kamslide2.jpg","http://img696.imageshack.us/img696/7066/kamslide1.jpg"); var alt1 = new Array(); var currentAd1 = 0; var imgCt1 = 3; function cycle1() { if (currentAd1 == imgCt1) { currentAd1 = 0; } var banner1 = document.getElementById('adBanner1'); var link1 = document.getElementById('adLink1'); banner1.src=imgs1[currentAd1] banner1.alt=alt1[currentAd1] currentAd1++; } window.setInterval("cycle1()",7000); </script> <img src="http://img687.imageshack.us/img687/4438/kamslide3.jpg" id="adBanner1" border="0" width="861" height="267" /></center> It looks like this: http://dolollies.blogspot.com How can I make the image fade?? Similar TutorialsDear forum Rather than use a library, I have attempted to write my own attempt at a script that allows multiple elements to be dragged around the page. It starts by loading all divs into an array, and then forms a new array of only divs with the required class name. I believe this script doesn't work for internet explorer, but I am not concerned by this. As you will see if you run the code below, the script works well for divs containing text, but if I include an image inside a div, then the image will follow the mouse even if the button is released. I have spent a whole day on this tiny script and really don't know where to go from here! Could anybody shed some light on this please? Thanks Matt Code: <html>
<head>
<style>
.dragger
{
background-color:lightgreen;
position:absolute;
}
</style>
<script type="text/javascript">
var all_els=[];
var els=[];
var el;
window.onload = function()
{
all_els=document.getElementsByTagName("div"); //an array of all div elements on page
for(var i=0;i<all_els.length;i++){
if(all_els[i].className=='dragger') { els.push(all_els[i]);} //just add those with the correct class name to our final array
}
for (el in els)
{
this.dragging=false; //each element in the array is an object, so new properties e.g. dragging can be set. Initially set the dragging property of each element to false
els[el].onmousedown=function() {this.dragging=true;}
els[el].onmouseup=function() {this.dragging=false;}
}
}
document.onmousemove = function(e)
{
for(el in els)
{
if (els[el].dragging==true)
{
els[el].style.left = e.clientX - els[el].offsetWidth/2 +'px';
els[el].style.top = e.clientY - els[el].offsetHeight/2+'px';
}
}
}
</script>
<title>Simple Drag</title>
</head>
<body>
<div class="dragger"> Some text to drag </div>
<br><br><br><br><br><br>
<div class="dragger"> Some other text to drag </div>
<br><br><br><br><br><br>
<div class="dragger"> <img src="http://www.mpklein.co.uk/images/phoenix.jpg"></img> </div>
</body>
</html>
Dear forum Rather than use a library, I have attempted to write my own attempt at a script that allows multiple elements to be dragged around the page. It starts by loading all divs into an array, and then forms a new array of only divs with the required class name. I believe this script doesn't work for internet explorer, but I am not concerned by this. As you will see if you run the code below, the script works well for divs containing text, but if I include an image inside a div, then the image will follow the mouse even if the button is released. I have spent a whole day on this tiny script and really don't know where to go from here! Could anybody shed some light on this please? Thanks Matt Code: <html>
<head>
<style>
.dragger
{
background-color:lightgreen;
position:absolute;
}
</style>
<script type="text/javascript">
var all_els=[];
var els=[];
var el;
window.onload = function()
{
all_els=document.getElementsByTagName("div"); //an array of all div elements on page
for(var i=0;i<all_els.length;i++){
if(all_els[i].className=='dragger') { els.push(all_els[i]);} //just add those with the correct class name to our final array
}
for (el in els)
{
this.dragging=false; //each element in the array is an object, so new properties e.g. dragging can be set. Initially set the dragging property of each element to false
els[el].onmousedown=function() {this.dragging=true;}
els[el].onmouseup=function() {this.dragging=false;}
}
}
document.onmousemove = function(e)
{
for(el in els)
{
if (els[el].dragging==true)
{
els[el].style.left = e.clientX - els[el].offsetWidth/2 +'px';
els[el].style.top = e.clientY - els[el].offsetHeight/2+'px';
}
}
}
</script>
<title>Simple Drag</title>
</head>
<body>
<div class="dragger"> Some text to drag </div>
<br><br><br><br><br><br>
<div class="dragger"> Some other text to drag </div>
<br><br><br><br><br><br>
<div class="dragger"> <img src="http://www.mpklein.co.uk/images/phoenix.jpg"></img> </div>
</body>
</html>
I have another crossbrowser problem - using frames. I am trying to make this hidden right frame appear where it should in other browsers such as Firefox. It only works in IE at the moment. This is a cut down demo: http://www.aapress.com.au/demo/readt.../readtest.html It consists of a number of parts: readtest.html left.html rightframe.html right.html top.html The rightframe.html is the holder for right.html. I am not trying to simplify it, just make the right.html page appear in the rightframe.html in FF. I suspect it has something to do with the coding at the bottom of rightframe.html: Code: <script type="text/javascript">
function test()
{
testframe.internalid.innerHTML = maindiv.innerHTML;
}
window.setTimeout("test()", 1000);
</script>
Is it obvious? Hi everyone! I am trying to edit a color on a javascript query for a blogger site. I'm a newbie and looking hard for a solution. Hope it's an easy answer. Thank you in advance. http://newmomcents.blogspot.com/ On the left, there is a gray box that is holding the moving images. I am hoping to change the color to something that would compliment my blog theme. I am complete newbie to this topic and i want to know how to add and external javascript file for blogger. I have heard that it decreases the load time of a page. Again please explain clearly as iam a newbie!! Any help would be appreciated!! Thanks In Advance!! hey guys im having a real problem with finding a script to lock my content for blogger, heres an example of the script Quote: http://www.blackhatcodebreaker.com/prison/index.html i have bought this script but does not work in blogger.com, can someone edit this script for me so it can work on bloger? you have to have the files hosted on your webhost.. With Blogger you have to 'pre-install' the jQuery code into the main coding, which I already did. Installed correctly, per help of other online forums. The problem I'm having now, is the CSS & HTML is coming together beautifully, but the hover effects are not working on the two drop-down options with multiple links. It is supposed to yield this: Ardor | CSS MenuMaker This is the proposed Javascript, that for some reason is not working. Code: <script type="text/javascript">
(function($){
$(document).ready(function(){
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
menu.removeClass('open');
} else {
menu.addClass('open');
}); });
})(jQuery); </script>
The HTML portion is: Code: @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
z-index: 999;
width: 750px;
font-family: 'Open Sans', Helvetica, sans-serif;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ebebeb));
background: -webkit-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ebebeb 100%);
}
#cssmenu > ul {
background: url('bg.png');
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li {
float: left;
display: inline-block;
}
#cssmenu.align-center > ul {
float: none;
text-align: center;
font-size: 0;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu > ul > li > a {
padding: 18px 25px 21px 25px;
border-right: 1px solid rgba(80, 80, 80, 0.12);
text-decoration: none;
font-size: 10px;
font-weight: 700;
color: #a19393;
text-transform: uppercase;
letter-spacing: 1px;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
color: #ffffff;
background: #f7f7f7;
background: rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li.has-sub > a {
padding-right: 45px;
}
#cssmenu > ul > li.has-sub > a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #a19393;
right: 17px;
top: 20.5px;
}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {
border-top-color: #ffffff;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 60px;
z-index: 9999;
padding-top: 6px;
font-size: 10px;
opacity: 0;
-webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
-moz-transition: top 0.2s ease, opacity 0.2s ease-in;
-ms-transition: top 0.2s ease, opacity 0.2s ease-in;
-o-transition: top 0.2s ease, opacity 0.2s ease-in;
transition: top 0.2s ease, opacity 0.2s ease-in;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > ul::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: #ffffff;
top: -4px;
left: 20px;
}
#cssmenu.align-right > ul > li > ul::after {
left: auto;
right: 20px;
}
#cssmenu ul ul ul::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-right-color: #ffffff;
top: 11px;
left: -4px;
}
#cssmenu.align-right ul ul ul::after {
border-right-color: transparent;
border-left-color: #ffffff;
left: auto;
right: -4px;
}
#cssmenu > ul > li > ul {
top: 120px;
}
#cssmenu > ul > li:hover > ul {
top: 49px;
left: 0;
opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
}
#cssmenu ul ul ul {
padding-top: 0;
padding-left: 6px;
}
#cssmenu.align-right ul ul ul {
padding-right: 6px;
}
#cssmenu ul ul > li:hover > ul {
left: 140px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
left: auto;
right: 100%;
opacity: 1;
}
#cssmenu ul ul li a {
text-decoration: none;
font-weight: 400;
padding: 11px 25px;
width: 140px;
color: #a19393;
background: #ffffff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu ul ul li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#cssmenu > ul > li > ul::after {
position: absolute;
display: block;
}
#cssmenu ul ul li.has-sub > a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 4px solid transparent;
border-left-color: #a19393;
right: 17px;
top: 14px;
top: 12.5px;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
border-left-color: transparent;
border-right-color: #a19393;
right: auto;
left: 17px;
}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {
border-left-color: #ffffff;
}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after {
border-right-color: #ffffff;
border-left-color: transparent;
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
background: #ffffff;
}
#cssmenu > ul {
display: none;
}
#cssmenu > ul.open {
display: block;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#cssmenu.align-right > ul {
float: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu > ul > li,
#cssmenu.align-right > ul > li {
float: none;
display: block;
}
#cssmenu > ul > li > a {
padding: 18px 25px 18px 25px;
border-right: 0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
background: rgba(0, 0, 0, 0.1);
}
#cssmenu #menu-button {
display: block;
text-decoration: none;
font-size: 13px;
font-weight: 700;
color: #a19393;
padding: 18px 25px 18px 25px;
text-transform: uppercase;
letter-spacing: 1px;
background: url('bg.png');
cursor: pointer;
}
#cssmenu ul ul,
#cssmenu ul li:hover > ul,
#cssmenu > ul > li > ul,
#cssmenu ul ul ul,
#cssmenu ul ul li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul li:hover > ul,
#cssmenu.align-right > ul > li > ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul ul li:hover > ul {
left: 0;
right: auto;
top: auto;
opacity: 1;
width: 100%;
padding: 0;
position: relative;
text-align: left;
}
#cssmenu ul ul li {
width: 100%;
}
#cssmenu ul ul li a {
width: 100%;
box-shadow: none;
padding-left: 35px;
}
#cssmenu ul ul ul li a {
padding-left: 45px;
}
#cssmenu ul ul li:first-child > a,
#cssmenu ul ul li:last-child > a {
border-radius: 0;
}
#cssmenu #menu-button::after {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #a19393;
border-bottom: 2px solid #a19393;
right: 25px;
top: 18px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #a19393;
right: 25px;
top: 28px;
}
#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after {
display: none;
}
}
The CSS portion is: Code: @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
z-index: 999;
width: 750px;
font-family: 'Open Sans', Helvetica, sans-serif;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ebebeb));
background: -webkit-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ebebeb 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ebebeb 100%);
}
#cssmenu > ul {
background: url('bg.png');
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li {
float: left;
display: inline-block;
}
#cssmenu.align-center > ul {
float: none;
text-align: center;
font-size: 0;
}
#cssmenu.align-center > ul > li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu > ul > li > a {
padding: 18px 25px 21px 25px;
border-right: 1px solid rgba(80, 80, 80, 0.12);
text-decoration: none;
font-size: 10px;
font-weight: 700;
color: #a19393;
text-transform: uppercase;
letter-spacing: 1px;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a {
color: #ffffff;
background: #f7f7f7;
background: rgba(0, 0, 0, 0.1);
}
#cssmenu > ul > li.has-sub > a {
padding-right: 45px;
}
#cssmenu > ul > li.has-sub > a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #a19393;
right: 17px;
top: 20.5px;
}
#cssmenu > ul > li.has-sub.active > a::after,
#cssmenu > ul > li.has-sub:hover > a {
border-top-color: #ffffff;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 60px;
z-index: 9999;
padding-top: 6px;
font-size: 10px;
opacity: 0;
-webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
-moz-transition: top 0.2s ease, opacity 0.2s ease-in;
-ms-transition: top 0.2s ease, opacity 0.2s ease-in;
-o-transition: top 0.2s ease, opacity 0.2s ease-in;
transition: top 0.2s ease, opacity 0.2s ease-in;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > ul::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: #ffffff;
top: -4px;
left: 20px;
}
#cssmenu.align-right > ul > li > ul::after {
left: auto;
right: 20px;
}
#cssmenu ul ul ul::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-right-color: #ffffff;
top: 11px;
left: -4px;
}
#cssmenu.align-right ul ul ul::after {
border-right-color: transparent;
border-left-color: #ffffff;
left: auto;
right: -4px;
}
#cssmenu > ul > li > ul {
top: 120px;
}
#cssmenu > ul > li:hover > ul {
top: 49px;
left: 0;
opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
}
#cssmenu ul ul ul {
padding-top: 0;
padding-left: 6px;
}
#cssmenu.align-right ul ul ul {
padding-right: 6px;
}
#cssmenu ul ul > li:hover > ul {
left: 140px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul > li:hover > ul {
left: auto;
right: 100%;
opacity: 1;
}
#cssmenu ul ul li a {
text-decoration: none;
font-weight: 400;
padding: 11px 25px;
width: 140px;
color: #a19393;
background: #ffffff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu ul ul li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#cssmenu > ul > li > ul::after {
position: absolute;
display: block;
}
#cssmenu ul ul li.has-sub > a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 4px solid transparent;
border-left-color: #a19393;
right: 17px;
top: 14px;
top: 12.5px;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
border-left-color: transparent;
border-right-color: #a19393;
right: auto;
left: 17px;
}
#cssmenu ul ul li.has-sub.active > a::after,
#cssmenu ul ul li.has-sub:hover > a::after {
border-left-color: #ffffff;
}
#cssmenu.align-right ul ul li.has-sub.active > a::after,
#cssmenu.align-right ul ul li.has-sub:hover > a::after {
border-right-color: #ffffff;
border-left-color: transparent;
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
background: #ffffff;
}
#cssmenu > ul {
display: none;
}
#cssmenu > ul.open {
display: block;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#cssmenu.align-right > ul {
float: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu > ul > li,
#cssmenu.align-right > ul > li {
float: none;
display: block;
}
#cssmenu > ul > li > a {
padding: 18px 25px 18px 25px;
border-right: 0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
background: rgba(0, 0, 0, 0.1);
}
#cssmenu #menu-button {
display: block;
text-decoration: none;
font-size: 13px;
font-weight: 700;
color: #a19393;
padding: 18px 25px 18px 25px;
text-transform: uppercase;
letter-spacing: 1px;
background: url('bg.png');
cursor: pointer;
}
#cssmenu ul ul,
#cssmenu ul li:hover > ul,
#cssmenu > ul > li > ul,
#cssmenu ul ul ul,
#cssmenu ul ul li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul li:hover > ul,
#cssmenu.align-right > ul > li > ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul ul li:hover > ul {
left: 0;
right: auto;
top: auto;
opacity: 1;
width: 100%;
padding: 0;
position: relative;
text-align: left;
}
#cssmenu ul ul li {
width: 100%;
}
#cssmenu ul ul li a {
width: 100%;
box-shadow: none;
padding-left: 35px;
}
#cssmenu ul ul ul li a {
padding-left: 45px;
}
#cssmenu ul ul li:first-child > a,
#cssmenu ul ul li:last-child > a {
border-radius: 0;
}
#cssmenu #menu-button::after {
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #a19393;
border-bottom: 2px solid #a19393;
right: 25px;
top: 18px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #a19393;
right: 25px;
top: 28px;
}
#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after {
display: none;
}
}
It generates into a drop-down menu that uses jQuery as part of the effects (simple fade drop-down); any help is greatly appreciated. Java is not my forte I've been looking everywhere with no luck, so maybe someone here can help me. If you end up having to code it for me, I'll give you credit and put you in my blogroll. So it's really easy to find a random post widget that just shows a list of links, but that's not what I want. What I want is something that will show only one post at a time with an image and a text exerpt. I also only want it to show posts with the label "favorite products". If you look at my blog now (http://www.orangeraspberrylemonade.blogspot.com), you'll see that there's a section in the sidebar that shows a favorite product and a link to all the posts with that label, but I have to update it manually and therefore only one post is getting attention at any given time. Hi guys! This is the website -> http://toplistmovies.blogspot.com/. Im having trouble about the posts below the slides. In firefox i see this -> http://s16.postimage.org/v4nmny4ar/fasdfalsdjf.png In Chrome i see this -> http://s16.postimage.org/uges505kz/fasdfasdfasdf.png This is the code -> Code: <div class='Image thumb' style='overflow:hidden;'>
<b:if cond='data:post.isFirstPost'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var default_thumbnail="http://3.bp.blogspot.com/-WxjumWhIM5E/TwKvb6jtXoI/AAAAAAAAEG0/hBQHJnIO5eE/s000/default.png";
if(image_url == "") image_url= default_thumbnail;
var nova = image_url.replace('s72-c', 's400', image_url);
image_tag='<img src="'+nova+'" style="width:260px;" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
</b:if>
<a expr:href='data:post.url'><script>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));</script>
</a>
</div>
<div class='information'>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>
</div>
</div>
<div class='postBoxMeta'>
<div class='postDate'>
<script type='text/javascript'>
var timestamp = "<data:post.dateHeader/>";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
var data = timesplit[2];
var date_dd = data.replace("de", "", timesplit[2]);
var date_mmm = timesplit[1].substring(0, 3);
}
</script>
<span class='day'><script type='text/javascript'>document.write(date_dd);</script>Dia</span> <br/>
<span class='month'><script type='text/javascript'>document.write(date_mmm);</script></span>
</div>
I HAVE CHANGED THE LOCATION
Hello all ~ It's been a long time since I've been on here, but I am trying to insert a header into my pages at http://www.dreamsonthefly.com the header being "Guided Fly Fishing on the Owyhee & Grande Ronde Rivers". I am not finding any .css on the page so I am hoping I can place in where it sits now but using the JS below and getting more space so the drop down menus don't interfere with the h1. I use Homestead and found when I was working with the JS Homestead put's their own code in as needed for their site. I am not well versed in all of this but I do understand what I need just not certain how to do it. I sure hope this all makes sense and appreciate the help. Code:
<div align="center">
<img src="headerforflybooklarger.jpg" alt="Fly fishing for Steelhead, Brown Trout & Smallmouth Bass" width="1020" height="126" hspace="0"/>
</div>
<div align="center">
<script type="text/javascript" language="JavaScript1.2">
<!--
stm_bm(["menu3374",430,"","blank.gif",0,"","",1,2,2,2,1000,1,1,1,"","100%",83886335],this);
stm_bp("p0",[0,4,0,0,15,3,0,7,100,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.10)",-2,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.10)",-2,100,0,0,"#000000","transparent","",0,0,0,"#000000"]);
stm_ai("p0i0",[0,"Home","","",-1,-1,0,"http://www.dreamsonthefly.com/index.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000"," bold 12pt Garamond"," bold 12pt Garamond",0,0],10,0);
stm_aix("p0i1","p0i0",[0,"The Fish","","",-1,-1,0,"http://www.dreamsonthefly.com/thefish.html"],10,0);
stm_aix("p0i2","p0i0",[0,"Destinations","","",-1,-1,0,"http://www.dreamsonthefly.com/destinations.html","_self","","","","",0,0,0,"arrow_r.gif","arrow_r.gif",7,7],10,0);
stm_bp("p1",[1,4,0,-1,4,3,0,0,100,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.41)",-2,"progid:DXImageTransform.Microsoft.Fade(overlap=.5,enabled=0,Duration=0.41)",-2,69,2,8,"#A87F09","",0,1,1,"#000000"]);
stm_aix("p1i0","p0i0",[0,"Owyhee Trout","","",-1,-1,0,"http://www.dreamsonthefly.com/owyhee.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,1,1],10,0);
stm_aix("p1i0","p0i0",[0,"Grande Ronde","","",-1,-1,0,"http://www.dreamsonthefly.com/granderonde.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,1,1],10,0);
stm_aix("p1i1","p1i0",[0,"Owyhee Bass","","",-1,-1,0,"http://www.dreamsonthefly.com/ofloat.html"],10,0);
stm_ep();
stm_aix("p0i3","p0i2",[0,"Guides","","",-1,-1,0,"http://www.dreamsonthefly.com/Newguides.html"],10,0);
stm_bpx("p2","p1",[]);
stm_aix("p2i0","p1i0",[0,"Dave Tucker","","",-1,-1,0,"http://www.dreamsonthefly.com/dtguide.html"],10,0);
stm_aix("p2i1","p1i0",[0,"Rhonda Price","","",-1,-1,0,"http://www.dreamsonthefly.com/rkpguide.html"],10,0);
stm_aix("p2i2","p1i0",[0,"Our Guides","","",-1,-1,0,"http://www.dreamsonthefly.com/guidesbios.html"],10,0);
stm_ep();
stm_aix("p0i4","p0i0",[0,"Rates","","",-1,-1,0,"http://www.dreamsonthefly.com/newlodging.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000","bold 12pt Garamond","bold 12pt Garamond",0,0],10,0);
stm_aix("p0i5","p0i2",[0,"Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/allflyinfo.html"],10,0);
stm_bpx("p3","p1",[]);
stm_aix("p3i0","p1i0",[0,"Steelhead Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/steelheadflies.html"],10,0);
stm_aix("p3i1","p1i0",[0,"Trout Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/troutflies.html"],10,0);
stm_aix("p3i2","p1i0",[0,"Atlantic Salmon Flies","","",-1,-1,0,"http://www.dreamsonthefly.com/atlanticsalmonflies.html"],10,0);
stm_ep();
stm_aix("p0i6","p0i4",[0,"Photos","","",-1,-1,0,"http://www.dreamsonthefly.com/photogallery.html"],10,0);
stm_aix("p0i7","p0i2",[0,"Contact Us","","",-1,-1,0,"http://www.dreamsonthefly.com/Contact.html"],10,0);
stm_bpx("p4","p1",[]);
stm_aix("p4i0","p1i0",[0,"Airline Reservations","","",-1,-1,0,"http://www.travelstoremaker.com/cgit/porch?agentid=dreamsonthefly"],10,0);
stm_ep();
stm_aix("p0i8","p0i2",[0,"Links","","",-1,-1,0,"http://www.dreamsonthefly.com/links.html"],10,0);
stm_bpx("p5","p1",[]);
stm_aix("p5i0","p1i0",[0,"Education","","",-1,-1,0,"http://www.dreamsonthefly.com/education.html"],10,0);
stm_aix("p5i1","p1i0",[0,"Resources","","",-1,-1,0,"http://www.dreamsonthefly.com/resources.html"],10,0);
stm_ep();
stm_aix("p0i9","p0i0",[0,"Blog","","",-1,-1,0,"http://www.dreamsonthefly.com/blog.html","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000","bold 12pt Garamond","bold 12pt Garamond",0,0],10,0);
stm_ep();
stm_aix("p0i9","p0i0",[0,"Book Trip ","","",-1,-1,0,"http://www.theflybook.com/Default.aspx?shop=108e506d-f6f6-4356-8e19-1e682ece3bf1","_self","","","","",0,0,0,"","",0,0,0,1,1,"#A87F09",1,"#A87F09",1,"","",0,0,0,0,"#A87F09","#000000","#000000","#000000","bold 12pt Garamond","bold 12pt Garamond",0,0],10,0);
;
;
stm_ep();
stm_ep();
stm_em();
//-->
</script>
</div>
I would like to somehow get both of these identical slideshow scripts working at the same time. Any help would be much appreciated! Code: <!-- dress -->
<div class= dress>
<div style="position:absolute; background-color:transparent; border-color: #000000; border:0px solid ; top: 443px; left: 346px; width:397px; height:255px;">
<script language="JavaScript1.2">
var variableslide=new Array()
//variableslide[x]=["", "", ""]
variableslide[0]=['dress/1.png', '', '']
variableslide[1]=['dress/2.png', '', '']
variableslide[2]=['dress/3.png', '', '']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth='395px' //set to width of LARGEST image in your slideshow
var slideheight='255px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='transparent'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=200
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}
var currentslide=0
function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]
if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}
if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider
</script>
</div>
<!-- end dress -->
<!-- hair -->
<div class="hair">
<div style="position:absolute; background-color:transparent; border: 0px solid; border-color: #000000; left:436px; top:105px; width:227px; height:227px;">
<script language="JavaScript1.2">
var variableslide=new Array()
//variableslide[x]=["", "", ""]
variableslide[0]=['hair/1.png', '', '']
variableslide[1]=['hair/2.png', '', '']
variableslide[2]=['hair/3.png', '', '']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth='227px' //set to width of LARGEST image in your slideshow
var slideheight='227px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='transparent'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=100
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}
var currentslide=0
function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]
if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}
if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider
</script>
</div>
<!-- end hair -->
Hi, I wonder if anyone can help me. I have a header I use on my site which has a Javascript code for rotating banner ads. I'd like to try to track the clickthroughs on these ads and have been looking at the methods of doing this in google analytics, but they all seem to be for single links, such as the method he http://support.google.com/googleanal...n&answer=55527 which then don't work with the links as they are in the banner. I was wondering if anyone knew how I would be able to integrate the analytics code in that link into the banner I have, or of another method I can use to track clicks on the ads. Thanks! This is the banner I'm using: Code: <script type="text/javascript">function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
link = new initArray(
"http://www.jojingles.com",
"http://www.goals-solutions.com/",
"http://www.barleylands.co.uk/",
"http://www.blukangaroo.co.uk/onlineshop",
"http://www.explorelearning.co.uk/vebo",
"http://www.explorelearning.co.uk/vebo",
"http://www.allmumkind.com/",
"http://quintessencemassage.weebly.com",
"http://www.dw-beauty.co.uk",
"http://www.theclothestree.co.uk"
);
image = new initArray(
"http://www.essexmums.org/images/jojingleslong.gif",
"http://www.essexmums.org/images/goalssolutionbanner.jpg",
"http://www.essexmums.org/images/barleylandsbanner.jpg",
"http://www.essexmums.org/images/blukangaroo.jpg",
"http://www.essexmums.org/images/explorelakeside.jpg",
"http://www.essexmums.org/images/explorelakeside.jpg",
"http://www.essexmums.org/images/allmumkind3.jpg",
"http://www.essexmums.org/images/quintessence.jpg",
"http://www.essexmums.org/images/dwbannerad.jpg",
"http://www.essexmums.org/images/clothestree.jpg"
);
text = new initArray(
"Jo Jingles",
"Goals Solution",
"Barleylands",
"Blu Kangaroo",
"Explore Lakeside",
"Explore Lakeside",
"Allmumkind",
"Quintessence",
"DK Beauty",
"The Clothes Tree"
);
function getrandom(){
var core2 = Math.floor(Math.random()*10); // amount of items in array
displaybanner(core2)
displaybanner(core2)
}
function displaybanner(theNum2){
var ranlink2 = link[theNum2];
var ranimage2 = image[theNum2];
var rantext2 = text[theNum2];
document.getElementById('theImg2').alt=rantext2;
document.getElementById('theImg2').src=ranimage2;
document.getElementById('theLink2').href=ranlink2;
}
</script><a href="#" target="_blank"
id="theLink2"><img src="" alt=""
id="theImg2" border="0"></a>
<script type="text/javascript">
getrandom();
setInterval("getrandom()", 22000);
</script>
Hi all! I am trying to implement the "Freeze pane" feature in javascript as it is in excel. I am almost there but am not able to get one last thing. The row header freezing is achieved first column freezing is also achieved. However, the top left column cell (which is supposed to stay frozed during both horizontal and vertical scroll) is not frozen. Prompt help is highly appreciated! Please find the html file and the js file being used. Thanks a bunch! Ree A full description of the problem, all the code and the test is also posted on: http://happinesshabitS.com/testroto4.htm I am trying to install a rotating banner on http://HappinessHabit.com How do I position the banner so it is NOT at the upper left hand corner of the page? I have tried wrapping it in <div> tags but that hasn't worked. I can get it rotating fine on the test page, but cannot place the rotating banner where I need it - see: http://happinesshabitS.com The code I placed on the test page is: Code: <script type="text/javascript" src="jshdrotate-1.js" ></script> </head> and Code: </head> <body onLoad="preloadImgs();randomImages();"> <img src="rotoimage1/ri-image-01.jpg" name="rotator" width="800" height="135" border="0" id="rotator"></a> Can I place this right above the </body> tag? The code I placed in a separate (jshdrotate-1.js) file is on http://happinesshabits.com/javahelp.pdf and below: Code:
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// Comma separated list of images to rotate
var imgs = new Array('rotoimage1/ri-image-01.jpg','rotoimage1/ri-image-02.jpg','rotoimage1/ri-image-03.jpg','rotoimage1/ri-image-04.jpg','rotoimage1/ri-image-05.jpg', 'rotoimage1/ri-image-06.jpg', 'rotoimage1/ri-image-07.jpg', 'rotoimage1/ri-image-08.jpg','rotoimage1/ri-image-09.jpg', 'rotoimage1/ri-image-10.jpg','rotoimage1/ri-image-11.jpg', 'rotoimage1/ri-image-12.jpg');
// delay in milliseconds between image swaps 1000 = 1 second
var delay = 6000;
var counter = 0;
function preloadImgs(){
for(var i=0;i<imgs.length;i++){
MM_preloadImages(imgs[i]);
}
}
function randomImages(){
if(counter == (imgs.length)){
counter = 0;
}
MM_swapImage('rotator', '', imgs[counter++]);
setTimeout('randomImages()', delay);
}
Many thanks for your help ! I am really in the dark about this. I'd asked this question before but didn't get any replies. Did I post and describe what I am trying to do and the problem correctly? Many thanks! Hey all, I have the old Yahoo! chess engine and Im making a webpage with a chessboard. Currently everything involved with this chessboard is wrapped up inside the code and dynamically creates everything it needs to operate. I have made a few customizations on several elements such as the PHP dropdown box that it dynamically creates as a quickjump to games. But i am wondering if someone wouldn't mind helping me in finding a way to write an amendment that reads 3 parts of the pgn file (Black)(Result)(White) (which it already does read them but just shows the info in the dropdown box) and display them as a header to the board. Everything in this script as far as variables go, are numbers... which makes it difficult at best which makes visual mapping harder. So I thought I would ask a professional what I should be looking for in the script so that I can go ahead and modify it and reuse some functionality to display a game header from javascript. The pgn viewer will read either string format directly input into the setup configuration in the html page, or it will read from a file. It them parses the elements based on the pgn tags. PHP Code: var tag=this.parseTag("FEN",pgn,i); if(tag&&tag!="?"){ this.board.startFen=tag; }else{ tag=this.parseTag("White",pgn,i); if(tag&&tag!="?"){ _68=tag; }else{ tag=this.parseTag("Black",pgn,i); if(tag&&tag!="?"){ _63=tag; }else{ tag=this.parseTag("Result",pgn,i); if(tag&&tag!="?"){ _62=tag; }else{ tag=this.parseTag("Event",pgn,i); if(tag&&tag!="?"){ _64=tag; }else{ tag=this.parseTag("Site",pgn,i); if(tag&&tag!="?"){ _65=tag; }else{ tag=this.parseTag("Date",pgn,i); if(tag&&tag!="?"){ _66=tag; So the variables I want to use are _68, _63, & _62 and display them as a header to the board. Any help is appreciated. Hi, I need to change the background and the header of a website on which i display ads (by an adserver) It works with this code : <script type="text/javascript"> parent.document.getElementsByTagName("body")[0].style.backgroundImage="url(http://example.jpg)"; parent.document.getElementsByTagName("body")[0].style.backgroundPosition="center 0"; parent.document.getElementsByTagName("body")[0].style.backgroundRepeat="no-repeat"; parent.document.getElementsByTagName("body")[0].style.backgroundColor = "#85bc21"; parent.document.getElementById("header").style.backgroundImage="url(http://example.jpg)"; </script> But i need those elements become clickable. Have you any solutions ? Thanks a lot. Sorry for my %"*!?& english Benoo have a div & a grid i want the div to be displayed on the column header click & be positioned with the specific column suppose 3rd grid header column is clicked the div shld be positioned near 3 column Hi guys, I am building my second site, this time with wordpress, for a friend's restaurant. I want to use a javascript rotating banner and so I found this nice little bit of code that does the job: http://budstechshed.com/dynamic-head...rdpress-theme/ Main code Code: <?php wp_enqueue_script('jquery'); ?>
<script type="text/javascript">
counter = 1;
num_images = 5; // Enter the number of images to rotate
dir = "<?php bloginfo('template_url'); ?>/images/headers"; // This is where your images are stored
function rotateHeader() {
var header_img = 'url(' + dir + '/header_' + counter + '.jpg)'; // jpg, png, or gif
jQuery('.art-Header-jpeg').css('background-image', header_img); // .art-Header-jpeg is the div you want to replace
counter++; if (counter > num_images) counter = 1;
}
</script>
I have it working fine, but the code does not fade the images, which is what I require. So, is there anyway I can change this code in order to make the images fade in/out between transition? Many thanks in advance, anyone who can help and lives in Kent or London, UK can get a free curry as a thank you |
|||||||