formatting data caption in light box - javascript

how to format the data caption
I am planning to display three different names for a single image
after i click the cube light box opens and the caption comes with div tag
but i wanted to display it one by one on the light box
its working fine without light box
$data = '';
$('[data-caption]').each(function(){
$data += '<div>' + $(this).data('caption') + '</div>';
});
$('body').append('<div id="more-info">' + $data + '</div>');
http://jsfiddle.net/ZrpLT/52/
<body>
<div class="row">
<div class="span10">
<div class="melonhtml5_gallery">
<div data-caption="<div>Paul Scholes</div> <div>Wayne Rooney</div> <div>Sir Alex Ferguson</div>" data-image="http://www.defie.co/designerImages/thumbnails/inventory.png"></div>
</div>
</div>
</body>

http://jsfiddle.net/ZrpLT/63/
This requires updating the Gallery class to use .html instead of .text when the caption is appended specifically in the onClick function on the line:
var m = $("<div>").addClass("caption").html(g ? g : ""),
As long as you are able to do that, you can get this to work for you.

Related

Dynamically add and initialise multiple text editors using textAngular

I'm currently trying to dynamically add a new textAngular when clicking on the "Add" button.
As the first textAngular element is already present in the HTML page, the initialisation works fine using wysiwyg function and I'm able to use the toolbar and see the result in the corresponding textarea.
When I click on the "Add" button, I would like to have another textAngular editor along with its corresponding textarea, which I manage to have and to initialise but as soon as I do this the previous textAngular editor doesn't work and isn't linked to its textarea anymore. The toolbar is also unclickable.
I get the following result :
Here's the code of the index.html page :
<body>
<div id="mainContainer">
<div ng-app="textAngularTest" ng-controller="wysiwygeditor" class="container app">
<div name="cours" id="textbox1">
<h3>TextBOX 1</h3>
<div text-angular="text-angular" name="htmlcontent" ng-model="htmlcontent" ta-disabled="disabled"></div>
<h3>HTML BRUT 1</h3>
<textarea ng-model="htmlcontent" style="width: 100%"></textarea>
<br>
<button id="btn1" onclick="displayEditor()">Add</button>
</div>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-sanitize.min.js'></script
<script src='https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.2/textAngular.min.js'></script
</body>
<!-- partial -->
<script src="./textbox.js"></script>
The style.css:
.ta-editor {
min-height: 300px;
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;
}
And here is the code of textbox.js :
angular.module("textAngularTest", ['textAngular']);
function wysiwygeditor($scope) {
console.log($scope);
$scope.orightml = 'Hello';
$scope.htmlcontent = $scope.orightml;
$scope.disabled = false;
};
function displayEditor() {
var number = Math.random();
document.getElementById("mainContainer").innerHTML += '<div ng-app="textAngularTest' + number + '" ng-controller="myController' + number + '" class="container app" id="mainContainer' + number + '"><h3>TextBox2</h3><div text-angular="text-angular" id="htmlcontent" name="htmlcontent" ng-model="htmlcontent" ta-disabled="disabled"></div><h3>HTML BRUT 2</h3><textarea ng-model="htmlcontent" style="width: 100%"></textarea>';
angular.module('textAngularTest' + number, ['textAngular'])
.controller('myController' + number, function ($scope) {
$scope.orightml = 'Hey';
$scope.htmlcontent = $scope.orightml;
});
angular.bootstrap(document.getElementById('mainContainer' + number), ['textAngularTest' + number]);
}
Explanation of the code : When I click on the "Add" button, I build the HTML of the new textAngular editor and its textarea giving them unique attributes so they are independant with the previous ones. When I add this new HTML content on the DOM, I initialise the new angular module with its own controller. But as soon as I do this and as I said it above, the previous textAngular editors don't work anymore.
Does anyone know how to reach that goal and initialise multiple textAngular editors without breaking the previous ones ?

drag and drop into textbox

I'm trying create a textbox and a draggable button.
At the moment when I click on the button a certain text is added to the begging of the textbox (JavaScript and HTML).
I want to add an option to drag the button into the textbox which will cause the same text from when I click on the button to be added into the textbox.
If it possible I also would like to choose where to add this text. I.e if I drag the button and drag in middle of a sentence in the textbox, it will add the text to the middle of the sentence where I dropped the text and not at the start of the textbox.
Thanks from advance.
Edit:
Here is part of the code i already did, sorry it a little messy (for what i'm doing i need all to put all in string).
var emoticon1 = "<input title='curious' onclick='add_tag("+'"curious"'+");' type='image' id='cur' src='/content/modules/dev/emoticons/curious.png' style='height:48px;width:48px;' />";
var emoticon2 = "<input title='confused' onclick='add_tag("+'"confused"'+");' type='image' id='con' src='/content/modules/dev/emoticons/confused.png' style='height:48px;width:48px;' />";
var emoticon3 = "<input title='helpful' onclick='add_tag("+'"helpful"'+");' type='image' id='help' src='/content/modules/dev/emoticons/helpful.png' style='height:48px;width:48px;' />";
var emoticon4 = "<input title='intersted' onclick='add_tag("+'"intersted"'+");' type='image' id='inte' src='/content/modules/dev/emoticons/interested.png' style='height:48px;width:48px;' />";
var tmp = "var txt=document.getElementById('commentTB').value;txt='#' + type + ' ' + txt ;document.getElementById('commentTB').value=txt;";
var fun = "<script> function add_tag(type) {"+tmp+"} </script>";
var emoticonsList = fun + emoticon1 + emoticon2 + emoticon3 + emoticon4;
The result at the moment:
how the current code looks
At the moment (I work in ubuntu if it matters), if run it in chrome, it let me drag the buttons (the pictures) and put them in the text, but it put the "src" in the textbox instead of the text i want. On the other hand, in firefox the buttons can't be dragged, even if add draggable="true".
You can do it with Drag & Drop-API.
document.addEventListener('dragstart', function (event) {
event.dataTransfer.setData('Text', event.target.innerHTML);
});
#buttons p {
appearance:button;
-moz-appearance:button;
-webkit-appearance:button;
display: inline-block;
padding: 2px 5px;
}
<div id="buttons">
<p draggable="true" id="1">This</p>
<p draggable="true" id="2">is</p>
<p draggable="true" id="3">a</p>
<p draggable="true" id="4">simple</p>
<p draggable="true" id="5">Drag'n'Drop-Test</p>
</div>
<textarea></textarea>
Tested in Chrome & Firefox.
Not sure what you've done so far so it's difficult to help but it sounds like jQuery UI could be useful here
Check out the Draggable and Droppable functions

How to make text hidden or revealed when inside or outside a <div>?

I have some text like this:
Once upon a time, <div class="light">there lived</div> a cat.
The <div class="light">cat liked</div> to watch fish swim.
I need to place some text, in a <div> e.g. <div class="hidden_when_inside">text</div> which is hidden if placed inside <div class="light">, but not hidden when outside. E.g.:
Once upon a time, <div class="light">there <div class="hidden_when_inside">this text is invisible</div> lived</div> a cat.
The <div class="light">cat liked</div> to watch <div class="hidden_when_inside">this text is visible</div>fish swim.
Similarly, some text placed in <div class="hidden_when_outside"> will be hidden only when outside of <div class="light">.
Here hidden means:
The text cannot be seen.
The text cannot be selected.
The text occupies no space.
The text does not interfere with the formatting of the other text.
Is there any way to hide or reveal text depending on whether or not it appears within another <div>?
Use the parent selector to hidden the inside element like below.
.light .hidden_when_inside{display:none}
FIDDLE DEMO
This can be done using pure css using the child selector > (note this will only effect immediate children so if the use case is that .hidden_when_inside can be nested several layers deep inside a .light then go with .light .hidden_when_inside)
.light > .hidden_when_inside{
display:none
}
Once upon a time, <div class="light">there <div class="hidden_when_inside">this text is invisible</div> lived</div> a cat.
The <div class="light">cat liked</div> to watch <div class="hidden_when_inside">this text is visible</div>fish swim.
If you want to display it later, you need to dive into JavaScript, for instance:
document.getElementByTagName('hidden_when_inside').onclick = function() {
var className = ' ' + myButton.className + ' ';
this.className = ~className.indexOf(' active ') ?
className.replace(' active ', ' ') :
this.className + ' active';
}

Loading an image buried within several divs when the parent div is shown by a .show jQuery command

I have a jQuery script running on an ASP site that shows hidden DIVs when the id of a select form matches the div's ID:
$(document).ready(function(){
$('select[name$="_77"]').change(function() {
$(".select_77").hide();
$(".select_77[id='" + this.value + "']").show();
})
})
The form truncated to only one option for this example:
<select name="option____jdfhj387___77">
<option value="1922">Raisins</option>
</select>
And this is one of the many divs that gets unhidden:
<div id="select_image">
<div class="select_77" id="1922" style="display:none;">
<div class="border">
<div class="content">
<img src="photos/option/1922.jpg">
</div>
</div>
</div>
</div>
The photos are medium sized, and it takes roughly 20-30 seconds for the page to load when I have 200+ of these images. Is there anyway to have the image load only when the parent div becomes visible, without having to manually put in every image url inside the script?
OK I figured it out after several hours of research.
I found and added code that renames an attribute of an img tag with a matching ID selected under the form.
$(document).ready(function(){
$('select[name$="_77"]').change(function() {
$(".select_77").hide();
$(".select_77[id='" + this.value + "']").show();
$("img.option[realsrc][id='" + this.value + "']").each(function() {
var $t = $(this);
$t
.attr({
src : $t.attr('realsrc') /* Copies realsrc attribute and makes a src attribute*/
})
.removeAttr('realsrc'); /* Deletes the realsrc attribute */
});
})
})
Then I added class="option" and id="#" and renamed src= to realsrc=.
<img class="option" id="1922" realsrc="photos/option/1922.jpg">
Now when someone selects the option that matches the ID of the image, the image's realsrc will be renamed to src and it will download and appear!

Javascript change div content upon a click

I'm pulling a content from PHP array and I have a situation like this:
<div class="weight-display">
<span>04/25/2011</span> <span>100lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc...
Now when somebody clicks on Edit within, let's say, first div where weight is 100lbs, I just need that "div" to change and to have input field instead of simple text where weight is (while others will remain the same) and to be like this:
<div class="weight-display">
<span>04/25/2011</span> <input type="text" value="100" /> <span>Save</span> <span>Cancel</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc..
So basically div has to "reload itself" and change content. Now I really need some very simple Javascript solution. Preferably I would like a solution with a hidden div beneath original one, so they just swap places when user clicks on EDIT and in a case if CANCEL is pressed to swap places again so original div with text is displayed...
Thanks,
Peter
<style type="text/css">
/* Normal mode */
.weight-display div.edit {display:none}
/* Editor mode */
.weight-edit div.show {display:none}
</style>
<div class="weight-display">
<button onclick="toggle(this)">Edit this!</button>
<div class="edit"><input type="text" value="Test" /></div>
<div class="show">Test</div>
</div>
<script type="text/javascript">
function toggle(button)
{
// Change the button caption
button.innerHTML = button.innerHTML=='Edit this!' ? 'Cancel' : 'Edit this!';
// Change the parent div's CSS class
var div = button.parentNode;
div.className = div.className=='weight-display' ? 'weight-edit' : 'weight-display';
}
</script>
What you suggest is basically correct. I would generate two div's one for display and one edit. The edit div will initially have display: none. When the Edit is clicked, hide the display div and show the edit div.
How about something like:
onClick event calls a function (EDITED to be a little smarter than my original brute force method):
function swapdivs ( id_of_topdiv, id_of_bottomdiv ) {
var topdiv = getRefToDiv( id_of_topdiv );
var bottomdiv = getRefToDiv( id_of_bottomdiv );
var temp = topdiv.style.zIndex;
topdiv = bottomdiv.style.zIndex;
bottomdiv = temp.style.zIndex;
}
Could that or similar work for you? Or am I missing some subtle yet crucial requirement?

Categories