Jeopardy: "a gimmick to separate it from other quiz and game shows. Because the prompt is the answer!"
This weaselly question appears to be OK, .. But what a terrible coding (Hole) I've dug for myself in the process.
I have a problem, in that I want to create several sets of:-
-- [ div text popup rollovers ]
-- [ that appear and disappear again ], but only when a mouse goes into, and then out of an <a href link, as in:-
<a href="#"
onmouseover=show('popup1')
onmouseout=hide('popup1')>Help Text One</a>
<br /><br /><br />
<a href="#"
onmouseover=show('popup2')
onmouseout=hide('popup2')>Help Text Two</a>
This weasel is an insidious creature to track down, being as all the other weasels are far too clever by half, and for the life of me I couldn't see what was really happening as the other weasels were running: nor even where the Ron Weaselly code went in my Harried Pottering Code.
This website has helped me so many times in the past, that I wanted to give a [ pop-goes-the-weasel ] back to future generations.
The answer to my rollover weasels is found here, that also has a rider attached:-
"It’s also perfectly fine to ask and answer your own question, as long as you pretend you’re on Jeopardy! — phrase it in the form of a question."
Here's the [ text rollover popup solution ] that I end up with, and this was after a day and a half of mumbling to myself and re-editing on codepen.io, then mumbling some more to get the simple coded weasel to popup on command.
Note: the resulting rollover code doesn't look that impressive, but it works. My issue now is whether it could made to work even better, and be made even simpler without me getting lost in the Triwizard Maze, populated by popping weasels of course.
Not sure if codebase.io examples are allowed here, being as all of the demonstrations I've seen thus far are in (fiddle.)
So I've created a fiddle account for you knowledgeable folks to give it the once over.
** Note: I've also magicked up a rather helpful line of helpful text: that actually gets changed by JS, to then reflect the state of the variables going (on) in the JavaScript section, the (alert) popup kept stopping the code from working.
The weaselly fiddly link is as follows:-
https://jsfiddle.net/terrymcb/4gL0ntvs/
Here's the HTML code, three blind rollover links that correspond to three divs, that are individually nested.
<p>DIV BOX ROLLOVERS</p>
<a href="#"
onmouseover=javascript:show('gcinfo')
onmouseout=javascript:hide('gcinfo')>TEXT-1</a> JS-1
<br /><br /><br />
<a href="#"
onmouseover=javascript:show('ucinfo')
onmouseout=javascript:hide('ucinfo')>TEXT-2</a> JS-2
<br /><br /><br />
<a href="#"
onmouseover=javascript:show('uainfo')
onmouseout=javascript:hide('uainfo')>TEXT-3</a> JS-3
<br /><br />
<p id="tValue"> Show in-out OBJ value. </p>
Here's the DIVS laid out.
<div id="ucinfo"><!-- which is hidden -->
<div class="dialog"><!-- is the common style -->
<p>This is the ucinfo included text.</p>
</div>
</div>
<div id="uainfo"><!-- which is hidden -->
<div class="dialog"><!-- is the common style -->
<p>This is the uainfo included text.</p>
</div>
</div>
<div id="gcinfo"><!-- which is hidden -->
<div class="dialog"><!-- is the common style -->
<p>This is gcinfo included text.</p>
</div>
</div>
The CSS, dialog box followed by three outer classes: (visible & display?) Over kill perhaps.
.dialog {
position: fixed;
top: 50px;
right: 50px;
bottom: 50px;
left: 150px;
z-index: 10;
display: flex;
padding: 1em;
background-color: rgba(0,0,0,.100);
/* opacity: 1; */
pointer-events: pointer;
transition: .25s ease-out;
}
#uainfo {
visibility: hidden;
display: none;
}
#ucinfo {
visibility: hidden;
display: none;
}
#gcinfo {
visibility: hidden;
display: none;
}
The all important JavaScript, note: I've cleaned the variables on every call, it seems to keep the function functioning, but I might well be paranoid at this point where JS is concerned. What I do know for a fact, is that calling the document.getElementById( direct keeps failing with the second call to JS, and I've no idea why! - Which is why the variables disp and vist have been used.
function hide(obj) {
disp0 = '0';
visp0 = '0';
disp0 = document.getElementById(obj);
visp0 = document.getElementById(obj);
disp0.style.display="none";
visp0.style.visibility="hidden";
document.getElementById("tValue").innerText='hide ' + obj;
}
function show(obj) {
disp1 = '0';
visp1 = '0';
disp1 = document.getElementById(obj);
visp1 = document.getElementById(obj);
disp1.style.display="block";
visp1.style.visibility="visible";
document.getElementById("tValue").innerText='show ' + obj;
}
That's all folks ..
Simply put, how can you change the border color of a Chosen jQuery select box? I am assuming you can do it with CSS but I can't quite figure out how.
$(".pnChosen").chosen({
search_contains: true
});
<select required class="pnChosen"></select>
I can use this to change the border color of all of them, but I only want to change ones that I mark as required.
.chosen-container{
border: 1px solid red;
}
And I also want to change the background color when they are disabled if that is possible.
You can use chosen's option inherit_select_classes.
Give required class on select element, and set css for this selector .required>chosen-single
$(".pnChosen").chosen({
search_contains: true,
inherit_select_classes: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" rel="stylesheet" />
<style>
.required>.chosen-single {
border: 1px solid #EE0000;
}
</style>
<select required class="pnChosen required">
<option>Option 1</option>
<option>Option 2</option>
</select>
Another option is to use the adjacent sibling combinator (+) selector in CSS to achieve the desired styling.
For example:
HTML
<select id="myselect" required="required">
...
</select>
<div id="myselect_chosen" class="chosen-container chosen-container-single">
<a class="chosen-single">
...
</a>
</div>
CSS
select:required + div.chosen-container a { ... }
This would apply the desired style(s) to your div.chosen-container a DOM element immediately following select:required. Just be aware that you may still have to establish CSS priority if you're attempting to override an existing Chosen style so your definitions can supersede any existing chosen styles.
Reference: Adjacent Sibling Combinator
I'm using the wysihtml5x editor (v0.4.12) and I have found an issue when double-clicking on the toolbar link to change the font colour of the text.
I have prepared a jsFiddle with a very minimalistic code that reproduces the problem.
var editor = new wysihtml5.Editor("wysihtml5-editor", {
toolbar: "wysihtml5-toolbar",
parserRules: wysihtml5ParserRules,
contentEditableMode: false
});
var editor2 = new wysihtml5.Editor("wysihtml5-editor2", {
toolbar: "wysihtml5-toolbar2",
parserRules: wysihtml5ParserRules,
contentEditableMode: false
});
div[contenteditable="true"] {
border: solid grey 1px;
height: 150px;
}
.wysiwyg-color-red {
color: red;
}
.wysiwyg-color-black {
color: black;
}
a[data-wysihtml5-command-value="red"] {
color: red;
text-decoration: none;
}
a[data-wysihtml5-command-value="black"] {
color: black;
text-decoration: none;
}
<script src="https://rawgit.com/Voog/wysihtml5/textcolor/parser_rules/advanced_unwrap.js"></script>
<script src="https://rawgit.com/Voog/wysihtml/0.4.12/dist/wysihtml5x-toolbar.js"></script>
<link href="https://github.com/Voog/wysihtml/blob/0.4.12/examples/css/stylesheet.css" rel="stylesheet" />
<div id="wysihtml5-editor" contenteditable="true"><span class="wysiwyg-color-red">Please follow these steps to reproduce the problem:</span>
<br>1.Click on the editor below just to give focus to it.
<br>2.Select all the text on the first editor (CTRL+A or using the mouse).
<br>3.Double click on <span class="wysiwyg-color-red">red</span> link toolbar of the first editor.
<br>4.Open the console to see the error (F12).
<br>5.You should be able to see the <span class="wysiwyg-color-red">Uncaught HierarchyRequestError:</span>
<br>6.Ignore the 'Discontiguous selection is not supported.' error.</div>
<div id="wysihtml5-toolbar" style="display: none;"> <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="black">black</a>
<a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a>
</div>
<div id="wysihtml5-editor2" contenteditable="true"><span class="wysiwyg-color-red">The</span> quick brown fox jumps over the lazy dog</div>
<div id="wysihtml5-toolbar2" style="display: none;"> <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="black">black</a>
<a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a>
</div>
The error that can be seen on console when following the steps provided on jsFiddle:
Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.
I have tested with the latest version of the Wysihtml5x editor and the same problem happens. Please ignore the Discontiguous selection is not supported. error as this is an issue that have been addressed already on latest version of the editor.
I am not sure if this error happens only with multiple editors, but I added two as it is what I used when I found the problem.
I have opened the issue on the Git Issue Tracker of the project.
It may be related to the issue opened on Xing base repository of this editor.
I could not reproduce the error on Firefox 37.0.2 which makes me think that it does not happen on Firefox.
Your help is much appreciated, thanks.
This problem has been resolved on version 0.5.2. All of them, including the 'Discontiguous selection is not supported.'
Thank you very much #oliver-pulges for pointing out the solution replying to the GitHub issue.
I am hosting a Jekyll Blog on Github and write my posts with Markdown. When I am adding images, I do it the following way:
This then shows the image in the text.
However, how can I tell Markdown to add a caption which is presented below or above the image?
I know this is an old question but I thought I'd still share my method of adding image captions. You won't be able to use the caption or figcaption tags, but this would be a simple alternative without using any plugins.
In your markdown, you can wrap your caption with the emphasis tag and put it directly underneath the image without inserting a new line like so:
*image_caption*
This would generate the following HTML:
<p>
<img src="path_to_image" alt>
<em>image_caption</em>
</p>
Then in your CSS you can style it using the following selector without interfering with other em tags on the page:
img + em { }
Note that you must not have a blank line between the image and the caption because that would instead generate:
<p>
<img src="path_to_image" alt>
</p>
<p>
<em>image_caption</em>
</p>
You can also use whatever tag you want other than em. Just make sure there is a tag, otherwise you won't be able to style it.
You can use table for this. It works fine.
|  |
|:--:|
| *Space* |
Result:
If you don't want to use any plugins (which means you can push it to GitHub directly without generating the site first), you can create a new file named image.html in _includes:
<figure class="image">
<img src="{{ include.url }}" alt="{{ include.description }}">
<figcaption>{{ include.description }}</figcaption>
</figure>
And then display the image from your markdown with:
{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}
The correct HTML to use for images with captions, is <figure> with <figcaption>.
There's no Markdown equivalent for this, so if you're only adding the occasional caption, I'd encourage you to just add that html into your Markdown document:
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<figure>
<img src="{{site.url}}/assets/image.jpg" alt="my alt text"/>
<figcaption>This is my caption text.</figcaption>
</figure>
Vestibulum eu vulputate magna...
The Markdown spec encourages you to embed HTML in cases like this, so it will display just fine. It's also a lot simpler than messing with plugins.
If you're trying to use other Markdown-y features (like tables, asterisks, etc) to produce captions, then you're just hacking around how Markdown was intended to be used.
A slight riff on the top voted answer that I found to be a little more explicit is to use the jekyll syntax for adding a class to something and then style it that way.
So in the post you would have:
{:.image-caption}
*The caption for my image*
And then in your CSS file you can do something like this:
.image-caption {
text-align: center;
font-size: .8rem;
color: lightgrey;
Comes out looking good!
There are two semantically correct solutions to this question:
Using a plugin
Creating a custom include
1. Using a plugin
I've tried a couple of plugins doing this and my favourite is jekyll-figure.
1.1. Install jekyll-figure
One way to install jekyll-figure is to add gem "jekyll-figure" to your Gemfile in your plugins group.
Then run bundle install from your terminal window.
1.2. Use jekyll-figure
Simply wrap your markdown in {% figure %} and {% endfigure %} tags.
You caption goes in the opening {% figure %} tag, and you can even style it with markdown!
Example:
{% figure caption:"Le logo de **Jekyll** et son clin d'oeil à Robert Louis Stevenson" %}
{% endfigure %}
1.3. Style it
Now that your images and captions are semantically correct, you can apply CSS as you wish to:
figure (for both image and caption)
figure img (for image only)
figcaption (for caption only)
2. Creating a custom include
You'll need to create an image.html file in your _includes folder, and include it using Liquid in Markdown.
2.1. Create _includes/image.html
Create the image.html document in your _includes folder :
<!-- _includes/image.html -->
<figure>
{% if include.url %}
<a href="{{ include.url }}">
{% endif %}
<img
{% if include.srcabs %}
src="{{ include.srcabs }}"
{% else %}
src="{{ site.baseurl }}/assets/images/{{ include.src }}"
{% endif %}
alt="{{ include.alt }}">
{% if include.url %}
</a>
{% endif %}
{% if include.caption %}
<figcaption>{{ include.caption }}</figcaption>
{% endif %}
</figure>
2.2. In Markdown, include an image using Liquid
An image in /assets/images with a caption:
This is [Jekyll](https://jekyllrb.com)'s logo :
{% include image.html
src="jekyll-logo.png" <!-- image filename (placed in /assets/images) -->
alt="Jekyll's logo" <!-- alt text -->
caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}
An (external) image using an absolute URL: (change src="" to srcabs="")
This is [Jekyll](https://jekyllrb.com)'s logo :
{% include image.html
srcabs="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
alt="Jekyll's logo" <!-- alt text -->
caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}
A clickable image: (add url="" argument)
This is [Jekyll](https://jekyllrb.com)'s logo :
{% include image.html
src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
url="https://jekyllrb.com" <!-- destination url -->
alt="Jekyll's logo" <!-- alt text -->
caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}
An image without a caption:
This is [Jekyll](https://jekyllrb.com)'s logo :
{% include image.html
src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
alt="Jekyll's logo" <!-- alt text -->
%}
2.3. Style it
Now that your images and captions are semantically correct, you can apply CSS as you wish to:
figure (for both image and caption)
figure img (for image only)
figcaption (for caption only)
You can try to use pandoc as your converter. Here's a jekyll plugin to implement this. Pandoc will be able to add a figure caption the same as your alt attribute automatically.
But you have to push the compiled site because github doesn't allow plugins in Github pages for security.
Andrew's #andrew-wei answer works great. You can also chain a few together, depending on what you are trying to do. This, for example, gets you an image with alt, title and caption with a line break and bold and italics in different parts of the caption:
img + br + strong {margin-top: 5px; margin-bottom: 7px; font-style:italic; font-size: 12px; }
img + br + strong + em {margin-top: 5px; margin-bottom: 7px; font-size: 12px; font-style:italic;}
With the following <img> markdown:
***Image:*** *description*
<p align="center">
<img alt="img-name" src="/path/image-name.png" width="300">
<br>
<em>caption</em>
</p>
That is the basic caption use. Not necessary to use an extra plugin.
Here's the simplest (but not prettiest) solution: make a table around the whole thing. There are obviously scaling issues, and this is why I give my example with the HTML so that you can modify the image size easily. This worked for me.
| <img src="" alt="" style="width: 400px;"/> |
| My Caption |
For Kramdown, you can use {:refdef: style="text-align: center;"} to align center
{:refdef: style="text-align: center;"}
{: width="50%" .shadow}
{: refdef}
{:refdef: style="text-align: center;"}
*Fig.1: This is an example image. [Source](https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg)*
{: refdef}
You need to add {::options parse_block_html="true" /} at the beginning of the post for this to work.
This option might seem complicated on the surface, but it is not at all and solves other problems that the Jekyll markdown renderer (Kramdown) has. Basically this option changes the renderer for one made with python that is expandable, allowing you to instally extensions (there are a ton, markdown-captions for example) and expand it (it has an extension API).
The first step is to define a custom markdown processor. You will have to add markdown: CustomProcessor to the _config.yml.
Then, we have to create the CustomProcessor. Create a folder called _plugins and add a file called MyConverter.rb with this content:
class Jekyll::Converters::Markdown::CustomProcessor
def initialize(config)
end
def matches(ext)
ext =~ /^\.(md|markdown)$/i
end
def output_ext(ext)
".html"
end
def convert(content)
puts "EXECUTED"
md_path = "./_plugins/temp/temp.md"
html_path = "./_plugins/temp/temp.html"
File.write(md_path, content, mode: "w")
system("python ./_plugins/MyConverter.py")
content = File.read(html_path)
content
end
end
You will also need to create a folder temp inside plugins.
All that code does is to write all the content of the file we are processing to temp.md, call a python script, wait until it finishes, read temp.html, and return it as the output of the converter.
Now it is time to create our converter in python. I have choosen to use Python-Markdown. It is easy to use and has a ton of extensions. To use the converter we have to create a file called MyConverter.py inside the _plugins folder and put this content inside:
import markdown
markdown_extensions = [
'markdown_captions',
'def_list',
'nl2br',
'tables',
'codehilite',
'fenced_code',
'md_in_html',
'attr_list'
]
md_file = open("./_plugins/temp/temp.md", "r")
md_string = md_file.read()
md_file.close()
html_string = markdown.markdown(md_string, extensions=markdown_extensions, extension_configs =extension_configs)
html_file = open("./_plugins/temp/temp.html", "w")
html_file.write(html_string)
html_file.close()
That code just loads the extensions, reads temp.md file, converts it to html and writtes it to temp.html. Using all those extensions should generate a similar output to the default jekyll markdown rendere. The only extension that is not bundled with python-markdown is markdown_captions, the one that does the magic. To install the python renderer and the extension you just have to run pip install Markdown markdown-captions.
That should do it, now your markdown is being translated by Python-Markdown. Some html elements my be different now (in my experience just a few) so maybe you have to make small changes in the css.
This is the css that I am using with the camptions:
figure{
margin: 0px;
}
figcaption {
color: gray;
font-size: 0.8rem;
}
The process tries to be as simple as possible to make it easy to understand and modify. I have described the process as well as I could remember. If anybody has a problem just leave a comment and I will update the answer.
Add the following config in the _config.yml file
# prose.io config
prose:
rooturl: '_posts'
media: 'img'
ignore:
- 404.html
- LICENSE
- feed.xml
- _config.yml
- /_layouts
- /_includes
- /css
- /img
- /js
metadata:
_posts:
- name: "layout"
field:
element: "hidden"
value: "post"
- name: "title"
field:
element: "text"
label: "Post title"
placeholder: "Title"
alterable: true
- name: "subtitle"
field:
element: "textarea"
label: "Subtitle"
placeholder: "A description of your post."
alterable: true
- name: "date"
field:
element: "text"
label: "Date"
help: "Enter date of post."
placeholder: "yyyy-mm-dd"
alterable: true
- name: "image"
field:
element: "text"
label: "Image"
help: "Add a thumbnail image to your post."
placeholder: "Thumbnail"
alterable: true
- name: "published"
field:
element: "checkbox"
label: "Publish"
help: "Check to publish post, uncheck to hide."
You can use this javascript that automatically generates a figcaption from the image's alt.
You can add some css to make the bottom text look more realistic.
The same applies to markdown. Whatever text you put ![HERE]() appears below the image.
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var altText = images[i].getAttribute("alt");
var figcaption = document.createElement("figcaption");
figcaption.innerHTML = altText;
images[i].insertAdjacentElement("afterend", figcaption);
}
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var altText = images[i].getAttribute("alt");
var figcaption = document.createElement("figcaption");
figcaption.innerHTML = altText;
images[i].insertAdjacentElement("afterend", figcaption);
}
<img src="https://www.w3schools.com/tags/img_girl.jpg" alt="Girl in a jacket">
I have the following code:
<img style="background: url(./image/data/logo.png) no-repeat top right" src="./image/data/picture.jpg" />
As it is now, it shows the logo.png under the picture.jpg image. How can I make it to be shown above the .jpg image?
Thanks.
You must use 2 images to do that. The img must be with position absolute (The one that you want to be over the other). Don't forget that the container must have position:relative in order to contain the absoluted png.
Here is the example:
http://jsfiddle.net/jNpaH/
The html tags:
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png"
class="png-over" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png"
/> </div>
The styles:
.image{position:relative}
.png-over{position:absolute; top:0; left:0}
The problem with that technique is that your code becomes spammed with the image tags.
One way of solving it with jQuery is to find each div container with the class 'images' and prepend to each one the image tag.
Here is the example:
http://jsfiddle.net/jNpaH/2/
According to your code I assume that you prefer to have a short html code. But it is impossible to have an image_tag with a background covering it.
The cleanest way is to use jQuery:
This is the final code:
http://jsfiddle.net/QyMkh/
First put a div that will contain all your images. The div must have a class, the images don't require it necessarily.
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Papua_New_Guinea_map.png" />
</div>
Then add this jQuery block in the html before the closing </body>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
// store in a variable the url of the image that will be used as background
var url = 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png';
// select every image_tag that is children of the div with the class 'image'
jQuery('.image img').each(function() {
// every child image will be wrapped inside generated divs with a class 'img-wrap'
$(this).wrap('<div class="img-wrap"></div>');
});
// After the images are wrapped, insert the image tag that will work as background, note that instead of using the source I'm using the variable that stores it.
$('<img src="' + url + '" class="logo" />').prependTo('.img-wrap');
</script>
Finally add those style declarations to get the desired effect.
<style type="text/css">
.img-wrap{position:relative}
.img-wrap img.logo{position:absolute; top:0; left:0}
</style>
This code will keep your html documents with no unnecesary markup when you try to edit next time.
An advantage of using an image_tag as a background, is that with css you can resize its width and height. Try adding this new rule of stylesheet:
.img-wrap img.logo { height: 170px; left: 75px; position: absolute; top: 50px; width: 170px}
To end this, if you want more flexibility, for example you don't want the image_tags be container in a div, do this actions: replace this line of the jQuery block:
jQuery('.image img').each(function() {
with this
jQuery('.image').each(function() {
and add a class="image" to each
<img class="image">