yes I might do that, it becomes a bit difficult if I want to buy thecable online though...should I ask for a female or male connector in this case?
Violet_82 89 Posting Whiz in Training
thanks JorgeM. I have used sprites before, the reason why I haven't used them this time is because the number of social media icons I will use is not definitive as yet, so I don't want to create multiple versions of the sprite. Besides, it might not be easy to assign a link to each single imgage of the sprite off the top of my head.
When I asked about the css, perhaps naively, I thought there was a way to do the all thing just using css, so that if I had to increment the number of socil media icons I had to update only the css and not the html. In my current solution, which is t the toop of the thread, I have a div and then the images and links associated with them. This works fine, the only trouble with it is that if I want to add another icon, I have to update both css and html. I like your first solution, I really didn't think about that, but the problem still stands, in that, if I am to add another icon I still need to update both css and html.
I think I will leave it as it is then, but thanks for posting your code, it is useful
Violet_82 89 Posting Whiz in Training
ok then, wait a minute, you were right JorgeM, maybe I am slightly confused about male/female connectors...I thought a male connector has pins sticking out, designed so that a female connector (without pins) will receive the male connector pins?! But here we are saying exactly the opposite thing. The connector on my laptop and tv, both have pins sticking out, so if I am to buy a HDMI cable I should ask for a cable which has 2 female connectors...Sorry to labour the point, I don't mean to be annoying, but there seems some confusion on this male/female business
Violet_82 89 Posting Whiz in Training
dany12, thanks but yes I know that, but I am specifically asking if I can have tow images added with css. To put things in contest, here's my current html:
<div class="social_media"><a href="https://www.facebook.com/andychristodrums"><img id="facebook_image" src="http://andys.antonioborrillo.co.uk/wp/wp-content/themes/twentyeleven/images/FaceBook_48x48.png" alt="" /></a><a href="https://twitter.com/#!/AndyChristo1"><img id="twitter_image" src="http://andys.antonioborrillo.co.uk/wp/wp-content/themes/twentyeleven/images/Twitter_48x48.png" alt="" /></a></div>
<!-- end of social_media -->
Now, if I do something like
...
background-image:url(http://andys.antonioborrillo.co.uk/wp/wp-content/themes/twentyeleven/images/FaceBook_48x48.png), url(http://andys.antonioborrillo.co.uk/wp/wp-content/themes/twentyeleven/images/Twitter_48x48.png);
...
would that work the same? If so, how do I then make those images as links in the css?
thanks
Violet_82 89 Posting Whiz in Training
hi all, is it possible to add more than an image in the css?
I mean if the syntax goes:
background-image:url('paper.gif');
background-color:#cccccc;
How do I add more than 1 image?
thanks
Violet_82 89 Posting Whiz in Training
Uhm, it looks the other way round here both the laptop and the tv connectors are male (they have the pin) so I need a female cable. I have a picture here http://antobbo.webspace.virginmedia.com/various_tests/hdmi_connector.jpg
The tv has the same slot
Violet_82 89 Posting Whiz in Training
Hi JorgeM, thanks, but the connectors on both tv and laptop are male, so my question really is, are all the HDMI cables female? If so then, no problem
Violet_82 89 Posting Whiz in Training
Hi there, sometime ago I enquired about hdmi cable, but never got around buying it. The moment has come now, but I have realized that the HDMI port on my laptop and on the TV are the same, in that it looks like I need a hdmi cable with 2 female connectors...is it possible? I thought - without knowing much about them - that HDMI cables have to have 2 different connectors, male and female...so are the hdmi cables all the same?
thanks
Violet_82 89 Posting Whiz in Training
Hello there, I wonder if you can help me with a jquery issue.
I am at the moment reading a book about it and there is an example in there, which you can
see here http://antobbo.webspace.virginmedia.com/various_tests/worktest/chapter_03/09_animated_navigation/index.html
If you hover on the navigation you will see the jquery effect kicking in
Now the book explains it roughly how that works but there are a few things I am not too sure about
So let's have a quick look at some of relevant bits of code.
HTML:
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Buy Now!</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Gift Ideas</a></li>
</ul>
</div>
CSS:
#navigation {
margin: 0 0 10px 0;
padding: 0;
list-style-type: none;
position: relative;
z-index: 1;
/* overwrite base */
float:none;
width:100%;
}
#navigation ul {
margin: 0;
padding: 0;
}
#navigation li {
display: inline;
margin: 0;
padding: 0;
}
#navigation a {
color: #015287;
display: inline-block;
padding: 5px;
text-decoration: none;
}
#navigation-blob {
top: 0;
background-color: #c0ffee;
position: absolute;
z-index: -1;
}
JQUERY
$(document).ready(function(){
$('<div id="navigation-blob"></div>').css({
width: $('#navigation li:first a').width() + 10,
height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation').hide();
$('#navigation a').hover(function(){
// Mouse over function
$('#navigation-blob').animate(
{width: $(this).width() + 10, left: $(this).position().left},
{duration: 'slow', easing: 'easeOutElastic', queue: false}
);
}, function() {
// Mouse out function
var leftPosition = $('#navigation li:first a').position().left;
$('#navigation-blob').animate(
{width:'hide'},
{duration:'slow', easing: 'easeOutCirc', queue:false}
).animate({left: leftPosition}, 'fast' );
});
});
and then there is the jquery plug in
Now …
Violet_82 89 Posting Whiz in Training
thanks, I am working with wordpress now, I will see how that goes for now
thanks
Violet_82 89 Posting Whiz in Training
hi JorgeM, thanks for you reply. I am actually looking into it, I have started to use wordpress, but really, there is something I don't understand about all that. I posted a bit on their forum to gather as much info as possible and also on the drupa forum, and it turns out that if you want to use drupal/wordpress you have to build the whole site with them, and then, clients can use them to update the site. But, I am looking at the wordpress interface and I am sorry but it is terible, editing the HTML and CSS is a nightmare it is all text based. I mean, I find hard to believe that I can't build a website as I usually do, from scratch using just notepad and then, when everything is ready, "plug in" a cms so that the client can do his own updates. I mean I don't want neither Drupal nor WOrdpress to do the job for me, I enjoy building sites and I want to do it myself, all I need is a cms for clients...sorry I am really frustrated because the more I post on the wordpress forum the more I understand that there isn't that much flexibility in editing the actual HTML and CSS...
ANy advice?
Violet_82 89 Posting Whiz in Training
Hi JorgeM,
thanks for that. I have never used wordpress before, so do you think I will have enough freedom with it to do pretty much what I want in terms of templates, embedding videos etc etc.
Also, where would be the best place for me to learn a bit about it?
Or, how about building the website from scratch and then use a cms, like drupal or so to let the client do the updates? what's best?
cheers
Violet_82 89 Posting Whiz in Training
Hi peeps, I was wondering if you can hep me at all with this.
I have to create a website for a client, he's a drummer and he wants to promote himself. He gave me a rough idea of what he wants - here some examples (sorry for the links but it is just to give you an idea): http://www.peteraybiggin.com/, http://www.rodneyholmes.com/fr_home.cfm, http://www.brianblade.com/, http://www.drummike.net/ - and I was wondering what's the best way to proceed. Should I develop it from scratch or should I use something like wordpress? The thing is that I will only build the website for him, I will not maintain it, it will be him updating it and adding stuff (probably every week) to it, so I am thinking about using wordpress. He will be adding content, videos, pictures, and I need something really easy he can use to update his website, something he can learn very quickly (he's not into IT by the way)
What do you guys reckon?
The thing is I don't know how much freedom wordpress can give, in that, can I code from scratch, get my own colour theme, use my own templates etc.
ANy help is very much ppreciated as usual
cheers
Violet_82 89 Posting Whiz in Training
thanks, I think I might need to look into how compression works then, just out of interest. Do you suggest any good link?
Violet_82 89 Posting Whiz in Training
thanks JorgeM, so I take it is not possible to access a compressed file and working on it while it is compressed? What is it that prevent this from happening, i mean, why a file needs to be decompressed (whether manually or automatically) before being accessed?
thanks
Violet_82 89 Posting Whiz in Training
Hi there, I was wondering if compressing a file and work with it while it is still compressed is possible/will be possible in the future?
Say you have a huge file, I am talking about terabytes of files, obviously just in theory, would it be possilble to work with it without decompressing it?
thanks
Violet_82 89 Posting Whiz in Training
Airshow, what you say makes a lot of sense. So I have changed the script to target the right elements:
$(document).ready(function(){
$(".nav_bullet li").click(function(){
$(".nav_bullet li ul").removeClass("hidden").addClass("visible");
});
});
Now, that works to an extent. When the list item in the list with nav_bullet is clicked on the nested lists have their hidden class removed and get a class visible which shows the element. The thing is that the above code brings makes appear all the nested lists whereas I need only the nested list whose parent list item has been clicked on.
I have 4 sublists so I need a way to say if I click on the first list show only its child list and not them all.
I have looked at filters but nothing seems to be the one for me simply because realistically I can click on any of the visible list item, in any order and I need to bring up just the child...How should I proceed?
Violet_82 89 Posting Whiz in Training
oh no, sorry that was very very slack of me, apologies.
I have amended that but it still doesn't work (although I don't get any error anymore).
I looked at the code again and changed the script slightly. In the current script I say $(".nav_bullet li").click(function(){... but I am trying to target a list which is nested in the one that has a class of nav_bullet so I have changed that to
$(document).ready(function(){
$(".nav_bullet li ul").click(function(){
$(this).removeClass("hidden").addClass("visible");
});
});
but still nothing happens to my list items when I click on them. Am I missing something in the script? If I analyze it it seems to be making sense because in the selector I am targeting the one in bold:
<ul class = "nav_bullet">
<li><a href = "#">Section one</a>
<ul **class** = "nested **hidden**">
<li>Link1</li>
...
and then using the keyword "this" so that the script works on the selected nested list whose parent I clicked on...well at least this is the idea...
Violet_82 89 Posting Whiz in Training
Hi peeps, I wonder if you can help me at all. I am recreating a simple design, just doing some testing really, and what I am trying to achieve is to hide and show the navigation on the left side, here's the website: http://antobbo.webspace.virginmedia.com/various_tests/worktest/test.htm
So ideally when i click on section one the nested bullet list come up and so on.
Problem is, it's not working and I am a bit unseure as to why.
Here's the code.
HTML:
...
<head>
<title>This is a test</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type = "text/javascript" src = "script.js"></script>
</head>
<body>
<div class = "wrapper">
<div class = "navigation">
<ul class = "nav_bullet">
<li><a href = "#">Section one</a>
<ul class = "nested hidden">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul><!-- end of nested -->
</li>
<li><a href = "#">Section two</a>
<ul class = "nested hidden">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul><!-- end of nested -->
</li>
<li><a href = "#">Section three</a>
<ul class = "nested hidden">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul><!-- end of nested -->
</li>
<li><a href = "#">Section four</a>
<ul class = "nested hidden">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul><!-- end of nested -->
</li>
</ul>
</div><!-- end of navigation -->
...
Here's the relevant css:
...
.navigation
{
border: 1px solid blue;
width:19%;
float:left;
margin-top:70px;
}
.clearing
{
clear:both;
}
.nav_bullet li
{
list-style:square;
}
.nested li
{
list-style:none;
}
.hidden
{
display:none;
}
.visible
{
display:block;
} … Violet_82 89 Posting Whiz in Training
Sorry I have run another test, which perhaps (?) confirms that the problem is with the dom. I have created another div called more_text. This is displayed but then I have created a script to hide it id javascript is on. So here's the script:
function no_script(){
var info_div = document.getElementById('more_info');
info_div.style.display = "none";
}
no_script();
and here's the relevant css:
#more_info
{
border:1px solid red;
width:400px;
height:400px;
position:absolute;
left:900px;
top:300px;
}
So originally I called the external script from the head section <script type = "text/javascript" src = "script_navigation.js"> </script>. It didn't work at all. But if I remove the function call from the bottom of the script no_script(); and place it in the body tag of the html file, the script works perfectly.
I think I am getting a bit confused here as to whether calling a script just from the head section is possible or not. If I want to hide something in the html, why do I have to call a function from the body waiting that everything loads up? What if I want to hide something before it loads (this I think is extremely important because say there are things in the page that I want to hide straight away so that users don't see it untill I change it with a script: this seems not to be possible. I don't want visitors to see briefly the elements I am trying to hide with the script I just want it to hide …
Violet_82 89 Posting Whiz in Training
Hi urtrivedi, I have tried that to no avail. I made some more testing and turned out that the same script (with your change)
var all_images = new Array (
"animal_full_1.jpg",
"animal_full_2.jpg",
"animal_full_3.jpg",
"animal_full_4.jpg",
"animal_full_5.jpg",
"animal_full_6.jpg",
"animal_full_7.jpg",
"animal_full_8.jpg",
"animal_full_9.jpg",
"animal_full_10.jpg",
"animal_full_11.jpg",
"animal_full_12.jpg"
);
var image;
var frame = 0;
function swapImages(){
setInterval("animate()", 500);
image = document.getElementById("the_image");
}
function animate(){
frame +=1;
if(frame > all_images.length){
frame = 0;
}
image.src = all_images[frame];
}
works only if I call the script from the html and remove the call to the function in the script itself.
So now I am calling the function directly from the body <body onload = "swapImages()">.
I have got the sneaky suspicion that the script doesn't work because the dom isn't ready, whereas if I call from body everything is ready...could that be the case?
Violet_82 89 Posting Whiz in Training
Hi there, I am running a few test and trying to practice a bit with javascript
I have come up with a script which is meant to swap images but it is producing errors. I had tried to debug with firebug but it is not going well at all and I am not quite sure what i have done wrong. I have done a similar script before but this time it is external and the function call is within the script itself, so nothing withing the html.
Anyway, here's what I came up with: antobbo.webspace.virginmedia.com/test/test.htm
the script code is here - external script script.js:
var all_images = new Array (
"animal_full_1.jpg",
"animal_full_2.jpg",
"animal_full_3.jpg",
"animal_full_4.jpg",
"animal_full_5.jpg",
"animal_full_6.jpg",
"animal_full_7.jpg",
"animal_full_8.jpg",
"animal_full_9.jpg",
"animal_full_10.jpg",
"animal_full_11.jpg",
"animal_full_12.jpg"
);
var frame = 0;
function swapImages(){
setInterval("animate()", 5000);
var image = document.getElementById("the_image");
}
function animate(){
frame +=1;
if(frame > all_images.length){
frame = 0;
}
image.src = all_images[frame];
}
swapImages();
When I open the page in firefox nothing happens...any idea please?
Firefox comes back with:
"image is not definedimage.src = all_images[frame]; "
Violet_82 89 Posting Whiz in Training
yes I tested it myself adn same as you. Thanks for your help!
Violet_82 89 Posting Whiz in Training
hi thanks for that, yes the pic is in the same directory already : - ) So do you think it's because I haven't specified all the dimensions? I didn't know that could affect it!
Violet_82 89 Posting Whiz in Training
HI there, I am having some issues with position fixed. I am trying to replicate this layout http://www.csszengarden.com/?cssfile=/213/213.css&page=0
This is what I came up so far antobbo.webspace.virginmedia.com/test/test.htm. All good, but I had an issue and I can't figure out what it was causing it. At the moment the fixed image is in a div on its own:
<!DOCTYPE html>
<html>
<head>
<title>This is a test</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
</div>
<div id ="image_fixed">
<img src = "bottom.png" alt = "">
</div>
<div id = "main_box">
<div id = "para"><p>
css Zen Garden
...
and here's the css for the fixed div:
#image_fixed
{
//background-image:url('bottom.png');
height:200px;
position:fixed;
bottom:0px;
}
So the issue is that if I add the image in the html everything works, but if I insert the image in the css as above - I commented it out - the image doesn't display. WHy is that? I can't come up with an explanation...
thanks
Violet_82 89 Posting Whiz in Training
just a quick line to say that I have fixed it. All I needed, I have discovered, for my script to handle images and descriptions properly were two lines of code:
$('#image_div > img').css('display', 'none');
$('#image_div > p').css('display', 'none')
so that the whole script now is:
function no_javascript(){
//thumbnails
document.getElementById('main_categories').style.display='block';
//big images repositioning
var big_images = document.getElementById('full_images');
big_images.style.display = "none";
//big_images.src.style.display = "none";
big_images.style.position = "fixed";
big_images.style.margin = "-245px 0 0 -350px";
big_images.style.backgroundColor = "transparent";
big_images.style.color = "white";
//big_images.style.fontSize = "0.9em";
$('#image_div > img').css('display', 'none');
$('#image_div > p').css('display', 'none');//these fixed all the issues : - )
}
I didn't know how to target the images inside the image_div
Violet_82 89 Posting Whiz in Training
Sorry I meant
> ...
> document.getElementById('thumbnail_15').style.display='block';
> ...
> document.getElementById('image15').style.display="none";
> ...
> var description15 = document.getElementById('description_15');
> ...
> description15.style.display = "none";
> ...
Violet_82 89 Posting Whiz in Training
Hi there, I think I have made a mess of the site I am working on, and I was wondering if anybody can help me understand how to fix this issue (if it is an issue at all)
Basically on this page I have 14 pictures http://antobbo.webspace.virginmedia.com/petras/test/czech_republic.htm and my script at the moment is made to handle 14 pictures:
function no_javascript(){
//thumbnails
document.getElementById('thumbnail_1').style.display='block';
document.getElementById('thumbnail_2').style.display='block';
document.getElementById('thumbnail_3').style.display='block';
document.getElementById('thumbnail_4').style.display='block';
document.getElementById('thumbnail_5').style.display='block';
document.getElementById('thumbnail_6').style.display='block';
document.getElementById('thumbnail_7').style.display='block';
document.getElementById('thumbnail_8').style.display='block';
document.getElementById('thumbnail_9').style.display='block';
document.getElementById('thumbnail_10').style.display='block';
document.getElementById('thumbnail_11').style.display='block';
document.getElementById('thumbnail_12').style.display='block';
document.getElementById('thumbnail_13').style.display='block';
document.getElementById('thumbnail_14').style.display='block';
//big images
document.getElementById('image1').style.display="none";
document.getElementById('image2').style.display="none";
document.getElementById('image3').style.display="none";
document.getElementById('image4').style.display="none";
document.getElementById('image5').style.display="none";
document.getElementById('image6').style.display="none";
document.getElementById('image7').style.display="none";
document.getElementById('image8').style.display="none";
document.getElementById('image9').style.display="none";
document.getElementById('image10').style.display="none";
document.getElementById('image11').style.display="none";
document.getElementById('image12').style.display="none";
document.getElementById('image13').style.display="none";
document.getElementById('image14').style.display="none";
//big images repositioning
var big_images = document.getElementById('full_images');
big_images.style.position = "fixed";
big_images.style.margin = "-245px 0 0 -350px";
big_images.style.display = "none";
big_images.style.backgroundColor = "transparent";
big_images.style.color = "white";
//big_images.style.fontSize = "0.9em";
/*var the_pic = document.getElementById('image_div');
the_pic.style.position = "fixed";
the_pic.style.display = "none";
the_pic.style.margin = "-525px 0 0 170px";
the_pic.style.color = "white";*/
//descriptions
var description1 = document.getElementById('description_1');
var description2 = document.getElementById('description_2');
var description3 = document.getElementById('description_3');
var description4 = document.getElementById('description_4');
var description5 = document.getElementById('description_5');
var description6 = document.getElementById('description_6');
var description7 = document.getElementById('description_7');
var description8 = document.getElementById('description_8');
var description9 = document.getElementById('description_9');
var description10 = document.getElementById('description_10');
var description11 = document.getElementById('description_11');
var description12 = document.getElementById('description_12');
var description13 = document.getElementById('description_13');
var description14 = document.getElementById('description_14');
description1.style.display = "none";
description2.style.display = "none";
description3.style.display = "none";
description4.style.display = "none";
description5.style.display = "none";
description6.style.display = "none";
description7.style.display = "none";
description8.style.display = "none";
description9.style.display = "none";
description10.style.display = "none";
description11.style.display = "none";
description12.style.display = "none";
description13.style.display = "none";
description14.style.display = "none";
}
It all works fine, no problems at …
Violet_82 89 Posting Whiz in Training
thanks, I think for the moment the issue is solved, the client is happy with a transparent frame, so I will use a png, she doesn't mind the portrait pictures being smaller
Violet_82 89 Posting Whiz in Training
All or any of these may work.
That worked. I removed all the speeds from the script, well, from the unbind('click').click(function(){ unbind('click').click(function(){
But I am interested in another solution you have mentioned:
Ensure the overlay is reset to its original opacity by showing it with
$overlay.css('opacity',0).animate('opacity',0.75);.
My script at the moment looks like this:
var $full_images;
var $close_button;
var $overlay;
$(function(){
$full_images = $(".full_images");
$close_button = $(".close_button");
$overlay = $(".overlay");
});
function change_images(image, text){
var $images = $("#" + image);
var $description = $("#" + text);
$overlay.hide().show();
$full_images.hide().show("slow");
$images.hide().fadeIn(1000);
$description.hide().fadeIn(1000);
$close_button.hide().show();
$close_button.unbind('click').click(function(){
$(this).hide();
$images.fadeOut();
$description.fadeOut();
$full_images.hide();
$overlay.hide();
});
}
So I have tried to do that but it doesn't seem to work, although in fairness I might have put that in the wrong position I first tried it in place of $overlay.hide().show(); but this
$overlay.css('opacity',0).animate('opacity',0.75);.
is meant to grab the opacity 0 and gradually getting to 0.75, correct?
I wonder, if I change the css and reset the opacity to 0, the overlay is still there isn't it? It is just the opacity that has changet but the actual overlay is still on the top of everything, whereas if I hide it with .hide() the overlay is actually hidden...am I making any sense?
@Troy III:
That's the whole point -There are no older browsers.
All browsers will stick to their highest release level of suported standards in case of a proper html doctype which is:
I am not …
Violet_82 89 Posting Whiz in Training
ahm sorry but I thought I was using the standards...the html 4 strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
as found in here http://www.w3schools.com/tags/tag_doctype.asp. What doctype then I am meant to use? I've always used html 4 since I started developing
Violet_82 89 Posting Whiz in Training
HI there, I have runt into an issue with the overlay I have on the website I am working on http://antobbo.webspace.virginmedia.com/petras/test/egypt.htm
The problems seem to be with Internet explorer 7, 8 and 9. Say you click on the first thumbnail, then the big pix comes
up and behind it the overlay. Then close this picture and click on the next one: the overlay is now solid black. Basically
it works fine with the first image but then any subsequent image seems to throw it.
I am aware of IE's not being able to handle the opacity therefore in my css I have this:
.overlay
{
display:none;
background-color:black;
position:fixed;
opacity:0.75;
filter:alpha(opacity=75); /* For IE8 and earlier */
top:0;
bottom:0;
right:0;
left:0;
width:100%;
z-index:100;
}
But despite this it doesn't work. I thought that maybe, it isn't the css but the script that handles the big
images but still I couldn't find anything wrong with it...maybe you can?
Here's the script:
var $full_images;
var $close_button;
var $overlay;
$(function(){
$full_images = $(".full_images");
$close_button = $(".close_button");
$overlay = $(".overlay");
$the_pic = $(".image_div");
});
function change_images(image, text){
var $images = $("#" + image);
var $description = $("#" + text);
$overlay.hide().show();
$the_pic.hide().show("slow");
$full_images.hide().show("slow");
$images.hide().fadeIn(1000);
$description.hide().fadeIn(1000);
$close_button.hide().show();
$close_button.unbind('click').click(function(){
$(this).hide();
$images.fadeOut("fast");
$description.fadeOut("fast");
$full_images.hide("slow");
$overlay.hide("slow");
$the_pic.hide("fast");
});
}
A note on the script: the variable $the_pic is there in error it hasn't actually been declared, but I doubt this
can be the problem because the overlay isn't working …
Violet_82 89 Posting Whiz in Training
HI there, I run into a very annoying problem. On one of the sites I am working on, I have a series of landscape and portrait pictures to show. The landscapes are ok as you can see from here if you click on the first thumbnail http://antobbo.webspace.virginmedia.com/petras/test/egypt.htm but if you try the second you see I am having problems with the portrait. Now, the script has been built to handle only landscapes pictures (I was thinking to do a similar thing to my own website where a portrait picture is effectively turned into a landscape by adding some black border around it - here's a practical demonstration http://antonioborrillo.co.uk/gloom.htm and click on the first thumbnail) but my client doesn't want a border around it which makes things more difficult. So, I wonder, what's the best way to handle this? Should I create in the script a function that handles landscapes and portraits? What do you recommend?
I have tried other things but not much joy to be honest, I have been thinkering the code for the whole day.
Violet_82 89 Posting Whiz in Training
Thanks, so I will go on and buy it. I assume the two ends are the same, for the computer and the tv
Violet_82 89 Posting Whiz in Training
Hi there, I was wondering if you can give me an advice at all. I need to get a HDMI cable to connect my laptop to my LED tv, mainly to watch movies. Now, I don't know much about hdmi cables so I wonder if there is anything you can suggest to help me decide which cable is the best for my situation.
My tv is already connected to my router with a normal ethernet cable.
The HDMI cables seem to range from £8.00 to £80.00 and from what I understand the most expensive are HDMI/ethernet which I probably don't need. So, any suggestion at all?
thanks
Violet_82 89 Posting Whiz in Training
Hi there, got a quick question about id selectors, something that is bugging me tonite, maybe I am a bit tired sorry. It isprobably obvious but lately I am having strange memory laspses....
given this html fragment:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Homepage</title>
<link href="tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>My Homepage</h1>
<ol id="toc">
<li><a href="page1.html">Page 1</a></li>
<li class="current"><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ol>
<div class="content">
<h2>Page 2</h2>
<p>Text...</p>
</div>
</body>
</html>
and this css fragment:
ol#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ol#toc a {
background: url(tabs.gif) 100% 0;
color: #008;
float: left;
line-height: 2em;
outline: none;
padding-right: 10px;
text-decoration: none;
}
if we say ol#toc we target an ol element with an id of toc. But if we said #toc ol we would target an ol element descendant of an element (any) that has an id of toc. Correct?
thanks
Violet_82 89 Posting Whiz in Training
Thanks for that cscgal, I know what you mean, if you can't replicate the problem it is hard to find the bug. I will post back if I experience the problem again, but I will need to post a long reply in a thread to test it, because it seems like it has to do with the lenght of the post, in fact I am not experiencing this in this thread
Violet_82 89 Posting Whiz in Training
Hi I have done it finally, although it looks significantly different from yours (and for some odd reasons it works on my computer but not in jsfiddle...uhm....)
The approach I took was - following your suggestions and adding a little bit of my own initiative - to have the empty unordered list and populate it with the <li> tags and the city names.
Here's the code with some modification here and there compared to the original
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<script type = "text/javascript" src = "script.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body onload = "getCities()">
<div id = "cities">
<ul id = "cities_list">
</ul>
</div>
</body>
</html>
CSS:
#cities
{
background-color:green;
width:100%;
height: 400px;
}
#cities_list
{
display:none;
background-color: yellow;
}
script:
var city_arr = new Array("London", "Madrid", "Leeds", "Barcelona");
var index;
function getCities(){
for (index = 0; index < city_arr.length; index++)
{
$("#cities_list").append("<li>" + city_arr[index] + "</li>");
//$("#cities_list").html("<li>" + city_arr[index] + "</li>");
}
$("#cities_list").show('slow');
}
This works : - )! Sorry it took me a bit to get there!
A mistake I was making was to have this in the scriptfor (index = 0; index < city_arr.length; index++) { $("#cities_list").html("<li>" + city_arr[index] + "</li>");... not realizing that the html method within the loop doesn't assign 4 bullet point to the list but at every run it clears the previous item and …
Violet_82 89 Posting Whiz in Training
something similar to Labdabeta: I have just written a reply to a thread of mine, quite a long reply actually, and when I click on the reply button nothing at all happens, it just stays there and I am not sure how to sbmit my answer. I probably will kill myself if I have to rewrite it, because it took me 15 mins to do it.
On a more general note, was there any particular reason why you guys decided to change the site, I mean it was perfect as it was, and at the moment I am experiencing quite a lot of problems. It's not a critique, just wondering really!
Violet_82 89 Posting Whiz in Training
Hi Airshow, thanks for the suggestions, yes it actually makes more sense to add the list and work on the single elements. I will do that. I won't cheat as yet, I want to give it a go myself first, then if I get stuck I will look at that
thanks again
Violet_82 89 Posting Whiz in Training
Hi thanks for that. I have thought so but the list doesnt exist yet, it needs to be created with the script, does that make a difference?
Violet_82 89 Posting Whiz in Training
HI there, I was wondering if anybody can advise.
I am trying to build an unordered list with a few items in a page, and I want this list to be created and displyaed dynamically.
So I create an array of strings and then through jquery I want this to slowly appear at page load (I have seen this test advertised on a website somewhere and I thought I give it a go but I am not 100% how to proceed)
Here's the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<script type = "text/javascript" src = "script.js"></script>
</head>
<body>
<div id = "cities">
</div>
</body>
</html>
and the css is here:
#cities
{
background-color:green;
width:100%;
height: 400px;
borde: 1px solid blue;
}
Now to the script, I have done just a bit of it because I am not too sure how to go about it:
var city_arr = new Array(4) {"London", "Madrid", "Leeds", "Barcelona"};
var cities_div = document.getElementById("cities");
$my_cities = $("#" + city_arr);
var index = 0;
function getCities(){
$("#cities").html("<ul><li>"$my_cities[index]...)
}...
Now, I wouldn't want to get the code from anyboy, rather I would like to try to write some code myself, and learn something, but I was hoping somebody can give me some good suggestions as to how to proceed.
After I created the array in the script I was hoping I could display each item …
Violet_82 89 Posting Whiz in Training
thanks for the help guys, very useful especially the articles. One thing: it was also suggested to me that the text can be centred using padding (I didn't really think about it). So say you want to have a div of 400px: you create a div of 200px and you give it padding-top:200px; and the div is now 400px and the text is in the middle. Neat.
Violet_82 89 Posting Whiz in Training
HI there, it might be perhaps a silly question, but in here http://antobbo.webspace.virginmedia.com/testing/test.htm how do I center the letters in the coloured divs? I want them to be in the middle of the box, but without adding extra divs...is it possible? Can quite do it, sorry
Violet_82 89 Posting Whiz in Training
Hi peeps,
sorry for the silly questions, but can anybody clarifying where front end development ends and where back end starts?
I mean I have in mind javascript for front end, but then would you consider php, asp.net backend?
Perhaps somebody could clarify please?
thanks
Violet_82 89 Posting Whiz in Training
Right, I had a go and it seems to work pretty much fine, there is just one thing which is a bit annoying, well quite a bit.
Here's what I have done. If you don't have javascript enabled the thumbnails ( #thumbnail_1 , #thumbnail_2 etc) are hidden;
the big images one below one another are instead displayed.
I have changed the css slightly so that the big images are not position:fixed; anymore and I gave them margin:0 auto; To bring things back to normal for javascript enabled users I have then created a new external script no_script.js:
function no_javascript(){
//thumbnails
document.getElementById('thumbnail_1').style.display='block';
document.getElementById('thumbnail_2').style.display='block';
document.getElementById('thumbnail_3').style.display='block';
document.getElementById('thumbnail_4').style.display='block';
document.getElementById('thumbnail_5').style.display='block';
document.getElementById('thumbnail_6').style.display='block';
document.getElementById('thumbnail_7').style.display='block';
document.getElementById('thumbnail_8').style.display='block';
//big images
document.getElementById('image1').style.display="none";
document.getElementById('image2').style.display="none";
document.getElementById('image3').style.display="none";
//big images repositioning
var big_images = document.getElementById('full_images');
big_images.style.position = "fixed";
big_images.style.margin = "-245px 0 0 -350px";
big_images.style.display = "none";
}that effectively resets everything to what it was before: thumbnails displayed, overlay, close button, big images with position:fixed; . It all works fine, but as I said at the beginning there is just this thing that is driving me insane: if you land on the page with the thumbnails http://antobbo.webspace.virginmedia.com/petras/test/egypt.htm you will notice that for less than a second all the images are displayed on the page as if javascript was disabled and then they disappear and the page looks as it should. Why is that happening? Does it depends on where I placed the new above script in the page? It's in the head tags, it's the first script in …
Violet_82 89 Posting Whiz in Training
Troy III, that's a very good one, it's amazing what you can do with just css and html, and completely javascript free, impressive, really!! In my case thought applying that code means to completely overhaul my code, whereas I would like to keep it very close to what it is at the moment and just add a script that captures javascript users + few minor changes.
Violet_82 89 Posting Whiz in Training
Hi guys,
I wonder if anybody can give me an advice.
I am working at a photography site (as many of you might know by now :)) and I realized I made a pretty bad mistake, for the second time in a row unfortunately, which is to rely on javascript to display my pictures. I think it is time to make amends, so I want to make sure the site, the whole site, works with javascript disabled.
I have an idea as to what to do, but I was wondering if you can let me know if this is the right way.
So, here the website, or I should say, the page with the javascript http://antobbo.webspace.virginmedia.com/petras/test/egypt.htm
Needless to say, if you click on the thumbnails (only the first 3 are linked up) adn you have javascript disabled nothing will happen.
Here are the relevant bits of code:
HTML code:
here are the thumbnails
...
<div class = "main_categories">
<div class = "thumbnail_1">
<a href="javascript:void(0);"><img style="border: 0pt none;" alt="" src="images/travel_page/travels_boxes_1.jpg" onClick = "change_images('image1')"></a>
</div><!--END OF thumbnail_1 -->
<div class = "thumbnail_2">
<a href="javascript:void(0);"><img style="border: 0pt none;" alt="" src="images/travel_page/travels_boxes_1.jpg" onClick = "change_images('image2')"></a>
</div><!--END OF thumbnail_2 -->
...here the big pictures, overlay and close button hidden in the page
...
<div class = "overlay">
</div><!-- END OF overlay -->
<div class = "full_images">
<div class = "image_div">
<img src = "images/animal_full_11.jpg" alt = "" id = "image1" style="display:none">
<img src …