Develop Reference

How to add a div to poptrox

I wondering if there is a method to add text to a poptrox popup. I know I can use the caption attribute to add caption text but that's not what i want. I want to add a div or text element to the pop up it self so when the user clicks on the image, a pop up shows up to describe an image. Is there any why to do this?
I'm following the poptrox github form, I tried using Iframes and the other sources it allows but noting is working the way i want it

In the HTML markup for the gallery items, add a div with the class "caption" inside the anchor element that links to the full-size image.
<a href="image1.jpg">
<img src="thumb1.jpg">
<div class="caption">Caption for Image 1</div>
</a>
In the jQuery code that initializes the Poptrox plugin, add the caption class to the list of classes that should be cloned when creating the lightbox.
$('.gallery').poptrox({
caption: function($a) { return $a.next('.caption').text(); },
overlayColor: '#2c2c2c',
overlayOpacity: 0.85,
popupCloserText: '',
popupLoaderText: '',
selector: '.thumb > a',
usePopupCaption: true,
usePopupDefaultStyling: false,
usePopupNav: true
});
You can then add CSS to style the caption as you desire.
.caption {
background-color: rgba(0,0,0,0.7);
bottom: 0;
color: #fff;
padding: 10px;
position: absolute;
width: 100%;
}

Is there a way to have different colored text inside a textarea?

I have an HTML Textarea, which contains a custom-made live editable JSON file where you can see the results of the edits in real-time. I also have something that can cycle through the entries in a "points" attribute, being a list, where it shows the results in the canvas where the JSON results are seen, such that one can see what point is being selected.
I want the point in the textarea to be able to be formatted when selected, such as the selected point in the textarea JSON to be highlighted yellow or have the text color changed to blue or something like that.
I have tried this:
<textarea id="objtext">
not orange
<span style="color:orange">
orange
</span>
not orange
</textarea>
It just showed the textarea having that in it as text, instead of formatting inside the textarea.
How do I make it formatted (and editable and readable by code with textarea.value ideally without the formatting)?

I don't think this is possible with textarea. I think epascarello is trying to tell you that it is possible using a div with the attribute contenteditable="true".
Check out this similar question - Is it possible to have several different textcolors in one textarea?
You will need to style the div to look and feel like a textarea. Here's a basic mockup, you may need to add some Javascript to extend this.
<div id="objtext" contenteditable="true">
not orange
<span class="orange-text">
orange
</span>
not orange
</div>
#objtext {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
overflow: auto;
padding: 4px;
width: 400px;
height: 200px;
font: medium -moz-fixed;
font: -webkit-small-control;
}
.orange-text {
color: orange;
}
::selection {
color:orange;
}
::-moz-selection {
color:orange;
}
https://jsfiddle.net/miainchambers/g07rcb5o/2/
Text value can be retrieved by using document.getElementById("objtext").textContent

Unfortunately, it's not possible to do this with a textarea nor input tags.
You can use instead:
contenteditable attribute
<div contenteditable="true">
Lorem Ipsum <span style="color: red;">Lorem</span>
</div>
WYSIWYG editor like https://github.com/tinymce/tinymce
Similar tools depending on the complexity you have to provide

Check out Highlight.js + an editable div.
Example:
<link rel="stylesheet" href="/path/to/styles/default.css">
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('code').forEach((el) => {
hljs.highlightElement(el);
});
});
</script>
<pre><code class="hightlight-json" contenteditable="True">{
"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": "None",
}
}
}
</code>
</pre>

Why does the selected element not always pop out during my Bootstrap Tour?

This is the HTML that my Bootstrap Tour is working on:
<body class="top-navigation">
<div id="wrapper">
<div id="page-wrapper">
<div class="row border-bottom">
<nav class="navbar navbar-static-top">
<div class="navbar-header">
<a href="/">
<img class="navbar-brand" alt="image" src="logo.png" />
</a>
<form class="navbar-form-custom" action="/profiles" accept-charset="UTF-8" method="get">
<input type="text" name="q" id="top-search" class="form-control"/>
</form>
</div>
<ul class="nav navbar-top-links navbar-right">
<li>
<a class="coach-dashboard" href="/dashboard">
<i class="fa fa-dashboard"></i> My Dashboard
</a>
</li>
<li>
<a class="my-favorites" href="/profiles?filter=favorites">
<i class="fa fa-list"></i> My Favorites
</a>
</li>
<li>
<a class="settings" href="/users/registration/edit">
<i class="fa fa-sliders"></i> My Settings
</a>
</li>
</ul>
</nav>
</div>
<div class="row wrapper border-bottom gray-bg page-heading">
<h2><span class="num-players">14 Players - Tryouts One 2016</span</h2>
</div>
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="contact-box profile-24">
<a href="/profiles/24">
<div class="col-lg-offset-1 col-lg-4 col-xs-4">
<div class="text-center">
<img alt="image" src="profile-24.jpg" />
Age: 30
</div>
</div>
<div class="col-lg-offset-1 col-lg-6 col-xs-8">
<h3><strong>Jimmy Choos</strong></h3>
<address>
<strong>St. George's College</strong><br>
Grade: <br>
Height: N/A<br>
Weight: N/A<br>
</address>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
This is the JS that triggers that the tour:
<script type="text/javascript">
$(document).on('turbolinks:load', function() {
var tour = new Tour({
storage: false,
backdrop: true,
steps: [
{
element: "div.navbar-header input#top-search",
title: "Search",
content: "Here you can search for players by their name, school, positions & bib color (that they wore in our tournament)"
},
{
element: "div.page-heading h2 span.num-players",
title: "Number of Players",
content: "This is the number of players are in our database for this Tournament"
},
{
element: '#page-wrapper div.contact-box.profile-<%= #profiles.first.id %>',
title: "Player Info",
content: "Here we have a quick snapshot of the player stats"
}
]});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
});
</script>
Here is how the tour looks with the backdrop:
This is rendered correctly:
These two are not rendered correctly with the highlighted element not visible:
How do I get all of the elements to render like the top one, where the highlighted element is visible?
Edit 1
Here is a JSFiddle that shows the behavior:
https://jsfiddle.net/nrkry27p/
Specifically, pay attention to the 2nd step where it doesn't get highlighted like the search in the demo gets highlighted. Except in my real code, search doesn't get highlighted...but you should be able to get an understanding of what's happening.
Final Edit
After many rounds of edits, constant backing and forthing, we finally figured it out. So, I have decided to clean up all of the edits that don't really add value to understanding the problem and the solution.

Currently the .tour-step-background element has a background-color:inherit property, which is inheriting transparent from the body. The reason the search element is displaying, is that it defaults to having a background colour of white from the browser.
Try adding a background colour to the .tour-step-background element, or alternatively, set a background-color for your body element. This should "highlight" the step that it's on.
JSFIDDLE
.tour-step-background{
background-color:#FFF;
}
EDIT
This is still a z-index and background-color issue that you're encountering. Based upon our discussion, it turned out that the supplied JS fiddle did not include the offending CSS from bootstrap regarding the z-index of navbar-fixed-top. Once this was identified, we needed to add some JS and some CSS to fix the problem. The JS applies a class to the body called is-touring when you start touring and removes the class when you end.
Using this class we override the z-index value of navbar-static-top so that we can display its internal elements above the tour display. The onStart and onEnd functions are available in the API reference for bootstrap tour.
CSS
/* ALSO REMOVE THE Z-INDEX VALUE ON THE RULE (line 247) */
.navbar-form-custom .form-contro{}
/* ADD THIS STYLE */
.is-touring .navbar-static-top{
z-index:auto;
}
/* BEGIN OPTIONAL CSS */
.tour-step-background {
background-color:#fff;
z-index: 2101;
}
.tour-step-backdrop{ /* this exists already, so update */
z-index: 2102;
}
.tour-backdrop {
z-index: 2100;
opacity: .7;
}
.popover[class*=tour-] {
z-index: 2101;
}
/* END OPTIONAL CSS */
JS
var tour = new Tour({
storage: false,
backdrop: true,
onStart: function(){
$('body').addClass('is-touring');
},
onEnd: function(){
$('body').removeClass('is-touring');
},
steps: [
{
element: "div.navbar-header img.navbar-brand",
title: "Go Home",
content: "Go home to the main page."
},
{
element: "div.navbar-header input#top-search",
title: "Search",
content: "Here you can search for players by their name, school, positions & bib color (that they wore in our tournament)"
},
{
element: "span.num-players",
title: "Number of Players",
content: "This is the number of players that are in our database for this Tournament"
},
{
element: '#page-wrapper div.contact-box.profile-24',
title: "Player Info",
content: "Here we have a quick snapshot of the player stats"
}
]});
UPDATED FIDDLE

I've played with your code and found a solution. The thing is it adds a class to your span and hence that does not have a white background you won't get the highlight behaviour. So if you add this in your css:
.num-players.tour-step-backdrop {
background-color: white;
}
It will work. And for your last one as well:
.contact-box.profile-24.tour-step-backdrop {
background-color: white;
}
Or you could use a general rule like this:
.tour-step-backdrop {
background-color: white;
}
UPDATE:
Based on your screen shot and changing the styles, I realised that you have a lower z-index on the class than the backdrop itself, so changing background alone doesn't help:
.tour-step-backdrop {
background-color: white;
z-index: 3100;
}
UPDATE 2:
That class is generic and shouldn't be used alone. I've tried a couple of variations and this seems to be working:
.tour-step-backdrop.tour-tour-element {
z-index: 4000;
background-color: white;
}

You must give initial background value to the elements you want to style to because there was no default background style even inherit on both span and h2 elements. It's easy to solve this problem as long as giving both span.num-players and its parent h2 a style is background: inherit. Just append that as following.
h2 {
/* Other style */
background: inherit;
}
.tour-step-backdrop {
/* Other style */
background: inherit;
}
EDIT
JSFiddle
I commented z-index of .tour-backdrop because it overlaid .tour-step-backdrop element.
.tour-backdrop {
/* z-index: 2100; Disable this style. */
opacity: .7;
}

.addClass() not working in JQuery function

I have numerous websites that are on a "dev" site meaning that it is dummy data and not all functionality works. What happens is that I have this function in my document.ready() that is supposed to find the html for the popup box and add a class to it, which gives the popup box a little blue header bar.
Function:
$("document").ready(
function(){
//loadSummary();
NOT_AVAILABLE_ALERT = $("#modalMessageAlert").dialog(
{
position: "center",
resizable: false,
bgiframe: true,
autoOpen: false,
width: 250,
height: 200,
draggable: false,
modal: true,
close:function(event,ui){
},
open:function(event,ui){
}
});
modifyModalHeader("modalMessageAlert","demo_dialog_header");
}
);
function modifyModalHeader(id,className){
var refs = $("#"+id).prev();
var ref = refs.eq(0);
ref.addClass(className);
}
function navigateDemo() {
NOT_AVAILABLE_ALERT.dialog("open");
}
HTML
<div id="tempXML" ></div>
<div id="modalMessageAlert"style="left:-200px; display:none">
<h3>This feature is not available in this demo household.</h3>
<input style="margin-bottom: 15px" type="button" Value="Close" onclick="NOT_AVAILABLE_ALERT.dialog('close');"/>
</div>
HTML link:
<input type="submit" onclick="javascript:navigateDemo();return false;" value="Save" id="save"/>
CSS
#modalMessageAlert {
background-color:#fff;
cursor:pointer;
padding: 10px 10px 10px 10px;
text-align:center;
vertical-align:middle;
}
.demo_dialog_header {
background-image:url(/backoffice/Prospects/APP360/images/demo_modal_header.gif)
}
If i understand correctly the modifyModalHeader function is supposed to find the tempXML div using the .prev() functionality and add that class to the tempXML div, and then when a user clicks the "submit" aka save button it shows the dialog, the dialog shows fine, just without the referenced image as the background-image, which just creates a solid blue line across the top about 15px wide. This EXACT same functionality and references work on pages included in the same directories just fine, but for some reason i can't get this to load correctly.
Any help is greatly appreciated.
-NickG

Turns out that i had conflicting style sheets that were overriding the class because i used some JQuery calendar extenders and they were being referenced as ui-widgets as does that popup.

Depressable Button Code not working

I found some code on the web which I got to work...The problem arose when I tried to expand it to 3 buttons..
The Original code in bold below...I tried to follow the code to add 2 more buttons, the buttons do appear but when I click buttons 2 and 3, they effect button 1 only...Button 1 works perfectly with the code below
<script type="text/javascript">
//preload images first
**img1=new Image()
img1.src="CommonFiles/ArrowBackShadow.png"
img2=new Image()
img2.src="CommonFiles/ArrowBackPress.png"**
img3=new Image()
img3.src="CommonFiles/ArrowUpShadow.png"
img4=new Image()
img4.src="CommonFiles/ArrowUpPress.png"
img5=new Image()
img5.src="CommonFiles/ArrowForwardShadow.png"
img6=new Image()
img6.src="CommonFiles/ArrowForwardPress.png"
</script>
Body....
<body>
<a href="whatever.htm"
onMousedown="document.images['example'].src=img2.src"
onMouseup="document.images['example'].src=img1.src">
<img src="CommonFiles/ArrowBackShadow.png" name="example" border=0></a>
<a href="whatever.htm"
onMousedown="document.images['example'].src=img4.src"
onMouseup="document.images['example'].src=img3.src">
<img src="CommonFiles/ArrowUpShadow.png" name="example" border=0></a>
<a href="whatever.htm"
onMousedown="document.images['example'].src=img6.src"
onMouseup="document.images['example'].src=img5.src">
<img src="CommonFiles/ArrowForwardShadow.png" name="example" border=0></a>
</body>
I'm far from a webmaster...Thanks for your help...
Randall

Do it with CSS.
.button {
display: block;
/* hide text: */
font-size: 0;
color: transparent;
}
#up {
width: 100px; /* replace with the width / height of your image */
height: 30px;
background-image: CommonFiles/ArrowForwardUp.png;
}
#up:active:hover {
background-image: CommonFiles/ArrowForwardUp.png;
}
/* Same for forward */
And your html:
Up
Forward
If all the buttons are of the same width and height, you even could move the width and height into the .button section.
The pros:
Your html code looks by far clearer
It's easy to maintain.
Later, you could style your buttons completely different without touching the html, but just modifying the CSS style code.
Browsers with images disabled, blind people etc. have the text instead of the images
No java script is required (some users have disabled it).

Make sure that the identifiers are correct:
<a href="whatever.htm"
onMousedown="document.images['thishouldmatch1'].src=img4.src"
onMouseup="document.images['thishouldmatch1'].src=img3.src">
<img src="CommonFiles/ArrowUpShadow.png" name="thishouldmatch1" border=0></a>