Working on the editor templates jquery I want to check if the tags have been added in the format eg {title} to later be able to replace them when viewing the template.
Unfortunately, or checks me just correct one tag, or if there is a word before the tag also indicates not correct.
The problem also is the situation when the tag is entered using the HTML editor, then it is in the form <p> {title} </p> and also does not properly validate the form.
I'm trying to somehow overcome, but poorly
$('textarea').keyup(function() {
var val = this.value;
var my = $(this).val();
if ( val.search(/{event_title}/) == 0 ) {
$( "p.eventTagTitle" ).addClass( "true" );
} else {
$( "p.eventTagTitle" ).removeClass( "true" );
}
if ( val.search('{event_form}') == 0 ) {
$( "p.eventTagForm" ).addClass( "true" );
} else {
$( "p.eventTagForm" ).removeClass( "true" );
}
if ( val.search('{event_author}') == 0 ) {
$( "p.eventTagAuthor" ).addClass( "true" );
} else {
$( "p.eventTagAuthor" ).removeClass( "true" );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p class="eventTag eventTagTitle">title</p>
<p class="eventTag eventTagForm">form</p>
<p class="eventTag eventTagAuthor">author</p>
<style>
.eventTag {color:red;}
.eventTag.true {color:green!important;}
</style>
<textarea type="text" name="eventTemplateBody" class="form-control" id="eventTemplateBody"></textarea>
check out the solution below:
I had to change green to blue so I could see if it was working and I dropped the !important tag.
CSS:
<style type="text/css">
.eventTag {
color: red;
}
.eventTag.true {
color: blue;
}
</style>
HTML:
<p class="eventTag eventTagTitle">title</p>
<p class="eventTag eventTagForm">form</p>
<p class="eventTag eventTagAuthor">author</p>
<textarea type="text" name="eventTemplateBody" class="form-control" id="eventTemplateBody"></textarea>
JAVASCRIPT:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$('textarea').keyup(function() {
var input = $(this).val();
// CHECK TITLE
if (input == "{event_title}") {
$(".eventTagTitle").addClass("true");
} else {
$(".eventTagTitle").removeClass("true");
};
// CHECK FORM
if (input == "{event_form}") {
$(".eventTagForm").addClass("true");
} else {
$(".eventTagForm").removeClass("true");
};
// CHECK AUTHOR
if (input == "{event_author}") {
$(".eventTagAuthor").addClass("true");
} else {
$(".eventTagAuthor").removeClass("true");
};
// TEST OUTPUT TO CONSOLE
console.log(input);
});
</script>
Related
There are five buttons:
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<button id="btn4">4</button>
<button id="btn5">5</button>
What Have To Be Done:
When clicking on any two buttons, the texts should swap between those buttons.
For example: If we click on "#btn1" and then on "#btn3", the text of "#btn1" should become "3" and the text of "#btn3" should become "1".
The above mentioned process should work on every buttons like clicking on the first button and the fifth button and so on.
Question: How can we do this with JQuery?
Set a data-flag attribute to the button which has been clicked and remove when the corresponding toggle button is clicked.
$( "button" ).click( function(){
if ( $("button[data-flag]").length > 0 ) //already clicked a button
{
var id = $("button[data-flag]").attr( "data-flag" );
var text = $(this).text();
$(this).text( $( "#" + id ).text());
$( "#" + id ).text( text );
$("button[data-flag]").removeAttr( "data-flag" ); //remove this line if toggling shouldn't clear
}
else
{
$(this).attr( "data-flag", this.id );
}
});
Demo
$( "button" ).click( function(){
if ( $("button[data-flag]").length > 0 ) //already clicked a button
{
var id = $("button[data-flag]").attr( "data-flag" );
var text = $(this).text();
$(this).text( $( "#" + id ).text());
$( "#" + id ).text( text );
$("button[data-flag]").removeAttr( "data-flag" );
}
else
{
$(this).attr( "data-flag", this.id );
}
});
button[data-flag]
{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<button id="btn4">4</button>
<button id="btn5">5</button>
You could use a class to identify which button should be swapped. That way you could apply some css to visually identify the button too. Also, this uses existing properties, rather than creating new variables.
css:
.swap { color: green; }
javscript:
$('button').on('click', function() {
if ($('button.swap').length) {
$(this).val(this.textContent).text($('button.swap').val());
$('button.swap').text(this.value).removeClass('swap').val('');
} else {
$(this).addClass('swap').val(this.textContent);
}
});
https://jsfiddle.net/Lpy08krd/
Option 1 - This is if you want to create a pair which swaps and resets on each 2nd click.
https://jsfiddle.net/Hastig/4skgd2a6/
$('button').click(function() {
if (!($('button').hasClass('first'))) {
$(this).addClass('first');
} else {
let thisText = $(this).text();
$(this).text($('button.first').text());
$('button.first').text(thisText).removeClass('first');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
Option 2 - This option is if you want to swap on each click, no resetting between pairs.
https://jsfiddle.net/Hastig/vw304u2x/
var gLastText = '';
var gLastButton;
$('button').click(function() {
if (gLastText !== '') {
var thisText = $(this).text();
$(this).text(gLastText);
$('#' + gLastButton).text(thisText);
}
gLastText = $(this).text();
gLastButton = $(this).attr('id');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<button id="btn4">4</button>
<button id="btn5">5</button>
I want to hide an element if the previous element has a number less than 0.
https://jsfiddle.net/82bysjag/2/
$(document).on("click", function() {
$(".hide").each(function() {
var prevqty = $(".hide").prev().text();
if (prevqty < 0) {
$(this).hide();
} else {}
});
});
div {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
-2
</div>
<div class="hide">
Hide
</div>
<div>
1
</div>
<div class="hide">
Hide
</div>
Is there an error with my var prevqty?
Use $(this) and parseInt to
$(".hide").each(function() {
var prevqty = parseInt($(this).prev().text(), 10);
if (prevqty < 0) {
$(this).hide();
} else {}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>-2</div>
<div class="hide">Hide</div>
The problem is from prevqty. JavaScript is seing it as a string. Convert it to number first as follows;
var prevqty = $(".hide").prev().text();
prevqty =Number(prevqty );
Then you can compare
I am trying to edit the text on a label.
I want to:
Show a label and hidden text Box.
On click of label: label gets hide and text Box shows where I can edit text.
On Enter, text Box should hide and label should display the entered text.
Here is the sample code.
But its not working as expected.
<h4>Editable labels (below)</h4>
<span class="k-link">
<label class="pull-left">Dashboard</label>
<input class="clickedit" type="text" id="731"/>
</span>
Demo
Check out this Demo.
Change the code from
$('.k-link').on('click', ".clickedit.prev()", function (event) {..
into
$('.k-link').on('click', ".pull-left", function (event) {..
And add inline css style for
<input class="clickedit" type="text" id="731" style="display:none"/>
Is this the functionality you want?
$(document).on('click', '#label', function() {
var that = $(this);
that.hide();
$('#731').removeClass('hidden');
});
$(document).on('focusout', '#731', function() {
var that = $(this);
var val = that.val();
that.hide();
$('#label').after('<span>' + val + '</span>');
});
.hidden { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h4>Editable labels (below)</h4>
<span class="k-link">
<label id="label" class="pull-left">Dashboard</label>
<input class="clickedit hidden" type="text" id="731"/>
</span>
This works:
$(document).ready(function(){
$(".clickedit").hide()
$(".pull-left").on("click", function(){
$(this).hide()
$(".clickedit").show()
});
$(".clickedit").on("blur", function(){
$(this).hide()
$(".pull-left").text($(this).val()).show()
});
});
this is working check it
i have just edit the selector it was .clickedit.prev() and i have change it to .pull-left
$('.k-link').on('click', ".pull-left", function (event) {
$(this).hide();
$(this).next().show().focus();
event.stopPropagation();
});
http://jsfiddle.net/anisboukhris/qho0uLzv/
may be try this:
$(document).ready(function(){
$("#f1").hide();
$("#text").hide();
var $curr = $( "#start" );
$curr.css( "background", "#f99" );
$( "button" ).on('click',function() {
$curr = $curr.prev();// this will go to previous div as you have asked how to get previous element.
$curr.show();
});
$( "#label" ).on('click',function() {
$("#label").hide();
$("#text").show();
$( "#text" ).blur(function() {
$("#label").show();
$("#text").hide();
$("#label").html($("#text").val());
});
});
});
div {
width: 150px;
height: 40px;
margin: 10px;
float: left;
border: 2px blue solid;
padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="f1"><span id="label">Came to previous div</span><input type="text" id="text" /></div>
<div id="start"></div>
<p><button>Go to Prev</button></p>
here's my html code:
echo "<div>";
echo '<video controls><source src="stuff/' . $entry . '"></video>';
echo "</div>";
here's my js code:
<script>
var videou = $( "video" ).attr("width", "150") + $( "video" ).attr("height", "80");
$( "video" ).click(function()
{
$(this).attr("width","500");
$(this).attr("height","500");
var open = true;
});
</script>
i want to go back to the original attributes. But i already tried everything. Should i use divs?
Expansion is a transitional event. Do you mean changing the width/height?
Here are expansion methods. As I had mention, check out jQuery's .slideDown() feature. Is this what you were looking for?
Simply replace the code for the .videocontainer with a video frame.
$(document).ready(function(){
$(function(){
var videos = $('.video'),
state = false;
videos.each(function(){
var videocon = $(this),
btn = videocon.find('.expandvideo'),
video = videocon.find('.videocontainer');
btn.on('click', function() {
if ( state == false ) {
video.slideDown('fast', function() { state = true; btn.html('Close Video'); });
} else {
video.slideUp('fast', function() { state = false; btn.html('Show Video'); });
}
});
});
});
});
.videocontainer {
display: none;
width: 500px;
height: 380px;
background-color:gray;
}
.expandvideo {
cursor: pointer;
color: blue;
}
.expandvideo:hover {
color: red;
}
<div class="video">
<span class="expandvideo">Show Video</span>
<div class="videocontainer">
<!-- Video Code -->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Also to expand the frame look into jQuery's .animate() function.
$(document).ready(function(){
$(function(){
var videos = $('.video'),
state = false;
videos.each(function(){
var videocon = $(this),
btn = videocon.find('.expandvideo'),
video = videocon.find('.videocontainer');
btn.on('click', function() {
if ( state == false ) {
video.animate({width: '500px', height: '500px'}, 'fast', function() { state = true; btn.html('Close Video'); });
} else {
video.animate({width: '100px', height: '80px'}, 'fast', function() { state = false; btn.html('Show Video'); });
}
});
});
});
});
.videocontainer {
width: 100px;
height: 80px;
background-color:gray;
}
.expandvideo {
cursor: pointer;
color: blue;
}
.expandvideo:hover {
color: red;
}
<div class="video">
<span class="expandvideo">Show Video</span>
<div class="videocontainer">
<!-- Video Code -->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Your question is hard to understand, but based on your js code, maybe is this what you want
<script>
var open = false;
$( "video" ).attr("width", "150");
$( "video" ).attr("height", "80");
$( "video" ).click(function()
{
if(open){
$(this).attr("width","150");
$(this).attr("height","80");
open = false;
}else{
$(this).attr("width","500");
$(this).attr("height","500");
open = true;
}
}
);
</script>
I'm not sure exactly what you are trying to achieve, as your description seems rather vague... If you are wanting a video to be displayed on the click of another element...
echo '<div id="divVideo" style="display: none;">';
echo '<video controls><source src="stuff/' . $entry . '"></video>';
echo '</div>';
echo 'Show Video';
<script>
$(document).ready(function() {
$('#aVideo').click(function(e) {
e.preventDefault();
$('#divVideo').show();
}
});
</script>
If that is not what you are trying to do, then please more descriptive and I'll try to help the best I can.
plugin demo: http://jqueryui.com/selectable/#serialize
Hello, I don't quite understand this "plugin" and specifically
result.append( " #" + ( index + 1) ); &
<span>You've selected:</span> <span id="select-result">none</span>.
I want the user to be able to select one of the following "buttons" and then a message to show in place of the Number selected (as in the demo)
So: You've selected: #2.
Would be: You've selected: UK, please goto this and do that etc...
im guessing the easiest way is with JavaScript
if "select-result" = 1 then
else
Sort of thing?
Any help Would be great! i hope this isn't a stupid question...
Code:
<html>
<head>
<title>jQuery UI Selectable - Serialize</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1) );
});
}
});
});
</script>
</head>
<body>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<ol id="selectable">
<li class="ui-widget-content">UK</li>
<li class="ui-widget-content">USA</li>
<li class="ui-widget-content">FR</li>
<li class="ui-widget-content">AU</li>
<li class="ui-widget-content">CA</li>
<li class="ui-widget-content">DE</li>
</ol>
</body>
</html>
the example in the plugins is showing the selected index.. you don't need to do that... what you need to do is get the text of selected and show it in span.. so use.. html() or text()..
try this
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" );
result.html($(this).html()); // result.text($(this).text());
}
});
});
var index = $( "#selectable li" ).index( this );
This grabs the index of the element we've been passed. We don't need this line.
result.append( " #" + ( index + 1) );
The index is the position at which the element occurs while descending the DOM.
We can change the above lines to one simple thing.
$( ".ui-selected", this ).text().appendTo(result);
Edit: See above, this may refer to the entire ul, so we need to filter it by the item that is selected. If you are allowing for a multi-select, then see below.
$( ".ui-selected", this ).each(function(){
$(this).text().appendTo(result);
});