• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

Website Questions

IndigoEmmy

Happy Togekiss
Pronoun
she/her
will do.

Umm... it kind of works. I think i can fix it.
Scratch that it's not really working?
Like... it defaults to Jirachi style kind of and i can't switch it back...
 
Last edited:

Butterfree

Still loves Joltik, though!
Staff member
Pronoun
she/her
Usually, if something’s not working, you’re going to have to show us the code you’re using in order for us to be able to figure it out! Try copying and pasting all the relevant code - the link tags, the Javascript - so we can try to see what’s wrong.
 

IndigoEmmy

Happy Togekiss
Pronoun
she/her
Alright here goes.

JAVA SCRIPT - note i downloaded this from the tutorial so it's likely the source of our problem.
/**
* StyleSwitcher: A JavaScript library for creating alternate stylesheets
* dynamically, and switching between them and their originals.
*/

var styleSwitcher = styleSwitcher || {
// The styles that are available for switching.
styleSheets: window.document.styleSheets,

// Hash table of style replacement patterns. Each pattern is defined as a
// search key and a replacement string, like this:
// {
// "http://www.example.com/styles/": "http://localhost/project/styles/",
// ...
// }
replacePatterns: {},

// Arrays of original and alternate style link objects.
originalStyles: [],
alternateStyles: [],

// The switcher state: original or alternate.
state: "original",

// Go through the available stylesheets and create alternate styles if
// appropriate. A hash table of replacement patterns can be passed.
processStyleSheets: function(patterns) {
patterns = patterns ? patterns : this.replacePatterns;

for (var s in this.styleSheets) {
var styleSheet = this.styleSheets;
// Check if this is a linked stylesheet.
if (styleSheet.href) {
var altURL = this.replaceURL(styleSheet.href, patterns);
if (altURL && altURL != styleSheet.href) {
// Tag this style as the original.
styleSheet.title = "original";
this.originalStyles.push(styleSheet);

// Create the alternate style.
var lStyle = this.createLink(true, altURL);
this.alternateStyles.push(lStyle);

}
}

// Look for @import rules.
// Avoid Security errors from cross-domain violations.
try {
rules = styleSheet != null ? styleSheet.cssRules : void 0;
}
catch (e) {
// Ignore the exception.
}

for (var r in rules) {
var rule = rules[r];

// Check if this is an import rule.
if (rule && rule.type == CSSRule.IMPORT_RULE && rule.href) {
var url = rule.href;
var altURL = this.replaceURL(url, patterns);

if (altURL && altURL != url) {
// Remove the import rule and create a new stylesheet link element.
styleSheet.deleteRule(r);
var oStyle = this.createLink(false, url);
this.originalStyles.push(oStyle);

// Create the alternate style.
var lStyle = this.createLink(true, altURL);
this.alternateStyles.push(lStyle);
}

}
}
}

},

// Create a new stylesheet link element.
createLink: function(alternate, url) {
var link = document.createElement("link");
link.setAttribute("rel", alternate ? "alternate stylesheet" : "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("title", alternate ? "alternate" : "original");
link.setAttribute("href", url);

document.getElementsByTagName("head")[0].appendChild(link);

return link;
},

// Replace the URL based on the passed patterns.
replaceURL: function(url, patterns) {
patterns = patterns ? patterns : this.replacePatterns;
var altURL = url;
for (var search in patterns) {
altURL = url.replace(search, patterns[search]);
if (altURL != url) {
break;
}
}
return altURL;
},

// Switch between original and alternate stylesheets.
switchStyle: function() {
// Switch the state.
this.state = this.state == "original" ? "alternate" : "original";

var disableOriginal = this.state == "alternate";
for (var o in this.originalStyles) {
var oStyle = this.originalStyles[o];
oStyle.disabled = disableOriginal;
}
for (var a in this.alternateStyles) {
var aStyle = this.alternateStyles[a];
aStyle.disabled = !disableOriginal;
}

}
}

<title>Indigo's Corner</title>

<link href="JirachiStyle.css" rel="stylesheet" type="text/css"
<link href="stylesheet.css" rel="stylesheet" type="text/css">>
<script type="text/javascript" src="styleSwitcher.js"></script>

</head>
<body>
<div style="position: relative; left: 0; top: 0;">
<img src="IndigosCorner.png" alt="Indigo Corner!">
<div id= "mascot">
<Marquee style="color:deeppink"> News: The Website is up! Yaaay! </Marquee>

<select id="Style">
<option value="Mew"> <a href=”#” onclick=”setActiveStyleSheet(‘default’); return false;”>Mew Style</a></option>
<option value="Jirachi"> <a href=”#” onclick=”setActiveStyleSheet(‘alternate’); return false;”>Jirachi Style</a></option>
</select>
<!-- I figured a selector thingy was more intuitive then a link -->

And then when i try to select mew or Jirachi style it just doesn't work.
 

Butterfree

Still loves Joltik, though!
Staff member
Pronoun
she/her
It looks like you’ve got two little mistakes in there. First, you seem to have pasted one of the link tags in slightly the wrong place - there’s no > after the first one, but two after the other.

Secondly, you can’t put an a tag into a select option - it just doesn’t work that way! In order to use a select menu you’d need the code to be a little different. I suggest just sticking with regular links for now.
 

IndigoEmmy

Happy Togekiss
Pronoun
she/her
Alright, makes sense, let's see if it works now.

Update - it defaults to mew style which is correct, but then this happens
Screenshot 2020-04-08 at 3.10.35 PM.png
(It's even worse when my witty Error 404 thing is witty to me)

Right, the links seem to be working but the style doesn't change. the code is about the same as last time, but i just changed that link up there too a new page.
 
Last edited:

Butterfree

Still loves Joltik, though!
Staff member
Pronoun
she/her
It looks like you’ve got curly quotes around the attributes on your a tags. That doesn’t work right; it needs to be straight quotes, like in the other attributes in your HTML.
 

IndigoEmmy

Happy Togekiss
Pronoun
she/her
oh huh. Good eye.
That fixed some things, I think...
but it didn't really work, because the style isn't switching.

Ahh well. maybe i can sleep on it and figure it out tomorrow. or maybe i could just think about it. That might work too. lol
 
Last edited:

IndigoEmmy

Happy Togekiss
Pronoun
she/her
Screenshot 2020-04-28 at 8.08.03 AM.png
My website is coming along (and in addition, i decided not to use a style picker until sometime after i release the website. I'm thinking of some sort of dark mode).

EDIT: this doesn't look super different from the first one... but i've added a lot more pages. :D
 

IndigoEmmy

Happy Togekiss
Pronoun
she/her
Aaaand... i have a link button now.
mewbutton.png
The text is a bit on the small side, but i still love the whole thing.
EDIT: i will make a dark mode link button, for darker websites.
EDIT: Waaay later when i feel like it.

EDIT: hey look i made it.
keldeobutton.png
This one looks a bit better in my opinion. lemme check it out on roar of time style here.

EDIT: I also wrote a comprehensive guide on how to catch/hatch shiny pokémon.
 
Last edited:

IndigoEmmy

Happy Togekiss
Pronoun
she/her
Uhh... so i want to align an image like... well let me show you.
For example
592 (1).pngThis is an image of Shiny Frillish Because i feel like writing text about shiny frillish
(This was just an example)
Also that wasn't super close, i want the text to be RIGHT next to the image and if i were to write a paragraph the paragraph would be right next to the image, instead of the image taking up lines.
Frillisg.png




Please ask if i'm not being clear. Instead of that... i get THIS
592 (1).png
This is an image of Shiny Frillish Because i feel like writing text about shiny frillish
this is not what i want at all... So something is off here.

Here's my code.
HTML:
<div>
    <IMG src= "AnImage.Png" Align=”right” />
    <p>This would be where i write the text that is to the right of the image. </p>

  
</div>
So... what am i doing wrong. I also tried using FLOAT, and a bunch of other stuff but i think there is probably an easier solution.
 
Last edited:

mewtini

... i think,
Pronoun
she/her
have you tried using display: inline-block? maybe try popping it onto the image/paragraph css (i guess you'd have to assign ids or something to them to do this)
 

IndigoEmmy

Happy Togekiss
Pronoun
she/her
i'm a bit confused. Would you mind explaining this as if i were 6 years old?

Oh... i get it i have to use CSS O.O;
 

mewtini

... i think,
Pronoun
she/her
this link does a decent job of explaining it. basically <p> usually will default to line-breaking (like what you're seeing) instead of sharing space with other things, like your image; setting display: inline-block should (?) fix that. so in the stylesheet, you could have like

Code:
#frillishImage, #frillishParagraph {
    display: inline-block
}
and it should help, but it would mean that you'd have to also change the html to <img id="frillishImage" .../> and <p id="frillishParagraph>...</p> so that you can write css specially for those two elements instead of having to style EVERY image and paragraph at once. (generally it's not ideal to use inline style, like the align="right" you have - since it's more often the case that you want to keep your html clean!)

(if you plan on styling more images like that, though, you may want to consider making a class instead of using ids like i did, since ids only let you change the style of one thing at a time. sorry if this doesn't make sense, i'm kind of avoiding doing classwork right now)
 
Last edited:

Butterfree

Still loves Joltik, though!
Staff member
Pronoun
she/her
Well... what you actually want here isn't inline-block (which will cause the image to be in line with the first line of the paragraph), but rather the float property, which does exactly what you want and causes the text to wrap around the image! All you have to do is set float:left; on the image and possibly add some margins/padding.
 

IndigoEmmy

Happy Togekiss
Pronoun
she/her
HTML:
<div>
    <img float:left; src= "ShinyFrillish.png" height:111 width:98 margins:5px padding:3px><img>
   <p>Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish </p>
</div>
So would this work? (I just added the Padding and Margins at random so that it might work... that might be where i messed up). I did test it but it didn't work so is it not loading or did i do something off...Screenshot 2020-04-29 at 4.16.26 PM.png
Ok might it be because my image (normally not a frillish) is too big to fit in between the little side menus.
Screenshot 2020-04-29 at 4.17.43 PM.png
(the white side with gray thingies are the menus)
 

Attachments

Last edited:

Butterfree

Still loves Joltik, though!
Staff member
Pronoun
she/her
float is a CSS property - it goes in the stylesheet, not on the element itself! Or, well, you could also put the whole thing into the style attribute, like so:

HTML:
<div>
    <img src="ShinyFrillish.png" style="float:left; height:111; width:98; margins:5px; padding:3px">
   <p>Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish Frillish </p>
</div>
But putting it in the stylesheet is cleaner.
 

IndigoEmmy

Happy Togekiss
Pronoun
she/her
That should work. I don't know why but i tend to avoid messing around with CSS if i can help it for now, so that should be great. I'll see if it works.
 
Top