I'm not really sure how to do this. I have a form with a language tag and I need to be able to have the 3rd party non editable text change to Spanish. In the form is a hidden field
So
if
<input type="hidden" name="lg" value="1">
then
$("#continue_shopping").val("Sigue Explorando");
$('#checkout_button a').text("Hagámoslo!");
else
$("#continue_shopping").val("Keep On Exploring");
$('#checkout_button a').text("Let's Do This!");
I have the English side done and I'm sure there is cleaner code to use but I'm just using
<script>
$("#continue_shopping").val("Keep On Exploring");
</script>
<script>
$('#checkout_button a').text("Let's Do This!");
</script>
Any help pointing me in the correct direction would be great.
Thank you
3rd party page code...
<div class="container">
<div class="col-sm-12">
<div class="col-sm-8">
<section id="cart_contents" class="fluid">
#cart_contents#
</section>
</div>
<div class="col-sm-3">
<section id="cart_details" class="fluid">
#cart_upsell#
#cart_shipping#
#cart_tax#
#cart_coupon#
#cart_message#
#cart_totals#
#cart_validation#
#cart_buttons#
</section>
<SCRIPT>
$("#continue_shopping").val("Keep On Exploring");
</SCRIPT>
<script>
$('#checkout_button a').text("Let's Do This!");
</script>
</div>
</div>
</div>
Related
In my code for cmd and normal its working, but for #aboutme its not. Don't know why such event is getting ignored while its working for the above snippet.
var normal = $(".normal");
var cmd = $(".cmd");
normal.on("click", function(){
$(".UI").show();
$(".console").hide();
});
cmd.on("click", function(){
$(".console").show();
$(".UI").hide();
});
$("#aboutme").on("click",function(){
console.log("okay");
});
My Html Code: class dashboard acts as a wrapper.
<div class="dashboard ">
<div class="option">
<div class="normal">Normal</div>
<div class="cmd">Terminal</div>
</div>
<hr style="background-color: white;">
<div class="console">
</div>
<div class="UI ">
<div class="showcase">
<div id="aboutme">
<h2><span>»About</span></h2>
<p>Self-motivated fresher seeking a career in recognized organization to prove my skills and utilize my knowledge and intelligence in the growth of organization.</p>
</div>
<div id="Skills">
<h2><span>Skills</span></h2>
<p> <kbd>Programming Languages</kbd> : Python, Node.js, C++</p>
<p> <kbd>Platform & Development Tools</kbd> : VS Code , Spyder and Jupiter Notebook</p>
</div>
</div>
</div>
Seems to work, can you provide your full HTML
$("#aboutme").on("click",function(){
console.log("okay");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="aboutme">Test</button>
I am not able to perform the auto suggestion functionality on divs with contenteditable attribute. Also when I write mass-autocomplete to divs, it is showing an error message like "mass-autocomplete not allowed on element div".
The following is code I have written. Could you please give the solution for this?
$scope.getClients = {
suggest: suggest_Client
};
<div class="row">
<div class="col-xs-12">
<div class="marginTB15" mass-autocomplete>
<div class="reach_box" contenteditable="true" ng-model="user.communities" mass-autocomplete-item="getNetworks">
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>
</div>
Seems that you using the mass-autocomplete directive incorrectly, it need so have an <input> tag as a element. Consider just having 2 blocks inside your div - one is a normal autocomplete:
<div mass-autocomplete>
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
</div>
while another one is a static end result of the autocompletion - say <div>{{user.communities}}</div>. And those two will be toggled by click for example. By this you wont' need content-editable at all.
So full code may look like this:
//controller
$scope.stateEdit = false;
$scope.toggleWidgetState = function(){
$scope.stateEdit = !$scope.stateEdit;
}
$scope.getClients = {
suggest: suggest_Client,
on_select:toggleWidgetState //here we put our widget back to read-only state
};
//other logic to handle mass-autocomplete
//template
<div class="row">
<div class="col-xs-12">
<div mass-autocomplete ng-show="stateEdit">
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
<ul> <li>Cardiologist Connect<button type="button">X</button></li></ul>
</div>
<div ng-show="!stateEdit" ng-click="toggleWidgetState()">
{{getNetworks}}
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>
I am new to jQuery and writing a script to change the color of a certain element based on whether or not the element it lies upon has been selected. My first problem is I am not able to edit the html structure and the way the structure is formed is causing some problems for me. Basically this is the structure:
<div class="item">
<div class="teamNames">
<span>Team 01</span>
<span>Team 02</span>
</div>
<div class="teamBlocks">
<div class="block 01">
<div>Home</div>
<div>0.65</div>
</div>
<div class="block 02">
<div>Home</div>
<div>0.65</div>
</div>
</div>
</div>
The team names have been absolutely positioned to lie over the blocks, so the content of the blocks looks like "Team Name Home 0.65".
When a block is selected its class becomes:
class="block 01 sel"
I am able to change the color of the "Home" and "0.65" text easily with CSS but changing the team name (Team 01/Team 02) is proving to be a lot more complicated and I am wondering if its possible to do this with or javascript or jQuery ?
Its also worth noting that the team names will never be the same so doing a selection based on the content is not possible
To change a specific team, you will need to give them unique identifiers, for example:
<div class="teamNames">
<span id="item1">Team 01</span>
<span id="item2">Team 02</span>
</div>
No you change select the specific span elements using jQuery. For example you want to change Team 01:
$("#item1").text("New Team Name");
Hopefully this is what you are trying to do.
if I get the question right, you can change the names with jquery like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".teamNames span:first").html("hello world");
});
</script>
Do you need to find team element by selected block?
If yes you can use $.index function for getting index of selected team:
var currentBlock = $('.sel');
var indexOfCurrentBlock = $('.block').index(currentBlock);
if (indexOfCurrentBlock != -1) {
var currentTeamName = $('.teamNames span').eq(indexOfCurrentBlock);
currentTeamName.text('aaaa');
}
http://jsfiddle.net/JRFv6/
Is this looking for class="block 01 sel" if it is selected
$(".block").click(function(){
$(".block").removeClass("sel");
$(this).addClass("sel");
});
DEMO
the way to change in elements not having id without to change html
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div class="item">
<div class="teamNames">
<span>Team 01</span>
<span>Team 02</span>
</div>
<div class="teamBlocks">
<div class="block 01">
<div>Home</div>
<div>0.65</div>
</div>
<div class="block 02">
<div>Home</div>
<div>0.65</div>
</div>
</div>
</div>
<script>
$(".teamNames span:eq(0)").html("New-Team-Name<br>");
$(".teamNames span:eq(1)").text("---- New Team Name");
</script>
</body>
</html>
I'm trying to follow this guide. I reach a problem when i try to change the HTML file when the user clicks a button.
This is my script:
<script>
window.$ = window.jQuery = WLJQ;
$("#btnPromo").click(function(){
$("#pagePort").load("pages/MainPage.html", function(){
alert("loaded!");
});
});
</script>
And this is my core HTML file (auto generated by Worklight):
<body onload="WL.Client.init({})" id="content" style="display: none;">
<!--application UI goes here-->
<div data-role="page" id="pagePort">
<div id="header" align="center">
<img src="images/logo.png">
</div>
<div data-role="content">
<div>
<input type="image" name="btnPromo" src="images/btnHotPromo.png" width="75%"/>
</div>
<div>
<input type="image" name="btnMall" src="images/btnMall.png" width="75%"/>
</div>
<div>
<input type="image" name="btnOutlet" src="images/btnOutlet.png" width="75%"/>
</div>
<div>
<input type="image" name="btnAbout" src="images/btnAbout.png" width="75%"/>
</div>
</div>
</div>
My goal is to change the #pagePort to MainPage.html every time the user clicks on #btnPromo.
The answer is i forgot to add the $(function(){}); at the start of the code, so the code should be :
$(function(){
$("#btnPromo").click(function(){
$("#pagePort").load("pages/MainPage.html", function(){
alert("loaded!");
});
});
});
And everything will be OK :D
Ive made a fiddle of my problem here.
http://jsfiddle.net/E9cUS/1/
JavaScript:
$('.top').click(function () {
var thisPage = $(this).closest('.yesNoItem');
$('.yesNoTick').stop().animate({"opacity" : 1},400, function () {
thisPage.find('.no .top').stop().animate({"opacity" : 0},400, function () {
$(this).css("display", "none");
});
});
});
$('.yesNoNext').click(function () {
$(this).closest('.yesNoItem').stop().animate({"opacity" : 0},400, function () {
//This isnt working? Please advise?
$(this).next('.yesNoItem').stop().animate({"opacity" : 1},400);
});
});
HTML:
<div id="stage">
<div class="yesNoOuter">
<div class="yesNoItem" style="opacity:1;">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 1</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
<div class="yesNoItem">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 2</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
</div>
</div>
I've also put the line of code thats not working.
Bascially it is hiding the element that I want, but not fading the next one in...
Can any one advise based upon my code? Many thanks!
You had an error in your markup
<div class="yesNoNext">More</span>
if you correct that, next() works http://jsfiddle.net/E9cUS/2/
I think your HTML got messed up. The second .yesNoItem element is not a sibling but a child of the first .yesNoItem element (right click -> inspect element).
Probably because of <div class="yesNoNext">More</span> (opening div, closing span). The browser will attempt to correct this automatically and just ignore the closing span tag (at least this seems to be the case if you inspect the DOM).
If you correct your HTML it should work (at least it should select the right element).
If they are actually supposed to be nested, then .next() is the wrong method anyways.