reading a viarble in the document - javascript

This seems like it should be simple i have a menu using Angular that sets a variable "active"
<a class="about" href="#" ng-click="active='About Me'">About Me</a>
and a Paragraph that will output whatever that active name is
<p ng-show="active">You chose <b>{{active}}</b></p>
What i can't figure out is now to set up a if check wither if "$active/{{active}} = "about me"" display this block of code so each link will fill the body with different content.
Any thoughts?

To achieve expected result, use below option
HTML:
<div ng-app="test" ng-controller="testCtrl">
<a class="about" href="#" ng-click="active='About Me'">About Me</a>
<a class="about" href="#" ng-click="active='Home'">Home</a>
<p ng-show="active">You chose <b>{{active}}</b></p>
</div>
JS:
var app = angular.module('test',[]);
app.controller('testCtrl',function($scope){
})
Make sure that the active scope variable is inside the tag having controller
code sample- https://codepen.io/nagasai/pen/wmBMjd

Related

How to change link depending on div id?

I'm using Jcink Forums - I can style divs based on the user group which can be used as a html variable (for IDs).
How can I change the link based on the ID?
I'm assuming this cannot be done via just css and html however I'm not well-versed in JS
For Example (not the full code, just a really abridged version):
Stylesheet:
#admin .avatar {background-image:url("admin.jpg");}
#mod .avatar {background-image:url("mod.jpg");}
HTML:
<div id="<!-- |g_id| -->">
<a href="link changes based on div id">
<div class="avatar"></div>
</a>
</div>
If you can script, you can do something like (inline for demonstration, you can loop over all divs and change their links)
<div id="<!-- |g_id| -->">
<a href="whatever" onclick="this.href=this.closest('div[id]').id=='xxx'?'zzz':'yyy'">
<div class="avatar"></div>
</a>
</div>
where an ID of xxx will set the href to zzz otherwise set it to yyy
You can use setAttribute to set the link href according to the id
var ele=document.querySelectorAll("div");
Object.values(ele).forEach((e)=>{
if (e.getAttribute("id") == "abcd") {
var link = e.querySelector("a");
link.removeAttribute("href");
link.setAttribute("href", "www.link2.com");
}
})
<div id="abcd">
<a href="link1">
<div class="avatar">aa</div>
</a>

Use jQuery to target a class within a div and perform additional changes within the same div

I have the following HTML code:
<div class="pack1">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
<div class="pack2">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
<div class="pack3">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
[...]
<div class="pack10">
<a class="optionButton">First option</a>
<a class="optionButton">Second option</a>
<a class="optionButton">Third option</a>
</div>
Using jQuery I would like to trigger an event on clicking the a tag with the optionButton class but I don't know how to limit the event to the div that the a tag resides in.
For example right now I have something like:
$(document).ready(function(){
$('.optionButton').click(function() {
$(".optionButton").removeClass('checked');
$(this).addClass('checked');
});
});
It works fine for the first selection, lets say when I click the First option in the pack1 div, but if I make another selection, lets say Third option in the pack3 div, the first one will disapear.
Also, there must be only one selected option for each pach.
You need to narrow down the selection of your removeClass, as right now it's selecting every occurrence of optionButton.
$(document).ready(function(){
$('.optionButton').click(function() {
$(this).siblings('.optionButton').removeClass('checked');
$(this).addClass('checked');
});
});
This will narrow it down by selecting siblings of the clicked element that have the class optionButton.
JSFiddle
EDIT: Woops, put the wrong class in there. Should be patched up now.
Because exact DOM structure is highly subject to change, your best bet is to almost always go to the parent and search your way down like so:
1) $(this).parent().find(".optionButton").removeClass("checked");
or you can simplify the selector results set (and make your code slightly more efficient) by saying:
2) $(this).parent().find(".checked").removeClass("checked");
You can also use the selector context parameter like so:
3) $(".checked", $(this).parent()).removeClass("checked");
The difference between 2 and 3 is purely syntactic. jQuery will convert 3 into 2 behind the scenes
I think this could work
$(document).ready(function(){
$('.optionButton').click(function() {
var parent = $(this).closest("div");//getting the parent content
parent.find(".optionButton").removeClass('checked');//remove the checked
$(this).addClass('checked');
});
});

JS menu stops working when navigating to a different page

I'm having some issues with my JS menu. When the page loads the menu work great, and as expected. You click the option, then it displays the menu items.
However, once I click one of the menu items and navigate to a different page the menu stops working! When you click on the icon, the menu no longer appears. The page just sits there. When i look try debug in chrome it no longer "hits" the code.
I have noticed that if i refresh that page, the menu works again as expected :/
My JS code is below, what am I missing for this kind of issue to arise?
I have created a pen for this - http://codepen.io/alr3id/pen/bwdKxL
function MyMenus(jQuery) {
$(".p-menu-icon").on("click", function(event) {
var e = $(this).next(".p-menu");
e.hasClass("p-menu_open") || $(document).trigger("click"),
$(".p-modal-bg").toggleClass("p-modal-bg_active"),
e.toggleClass("p-menu_open"),
event.stopPropagation()
});
// Removes the menu open class.
$(document).on("click", function(t) {
var e = $(t.target)
, i = 1 === e.closest("p-menu").length;
i || ($(".p-menu.p-menu_open").removeClass("p-menu_open"),
$(".p-modal-bg").removeClass("p-modal-bg_active"))
});
}
// Load
$(document).ready(MyMenus);
Below is the HTML for the Menu
<nav class="p">
<div class="p-modal-bg"></div>
<div class="p-property">
<a class="p-property-name" href="/">
Logo Here
</a>
</div>
<div class="p-user">
<a class="p-menu-icon">
<div class="icon icon-navigator-toggle"></div>
</a>
<div class="p-menu p-menu_navigator">
<a class="p-menu-item p-menu-item_dashboard" href="/">Dashboard</a>
<a class="p-menu-item p-menu-item_orders" href="/orders">My orders</a>
<a class="p-menu-item p-menu-item_back-bar" href="/products">Products</a>
</div>
<a class="p-menu-icon p-menu-icon_account">
<div class="p-user-avatar_container">
<img alt="Example user" class="gravatar" src="{image here}">
</div>
</a>
<div class="p-menu p-menu_account">
<div class="p-menu-item_account-details">
<div class="p-user-avatar_container">
<img alt="Example user" class="gravatar" src="https://secure.gravatar.com/avatar/{image here}">
</div>
<div class="p-account-details-name">
Example User
</div>
<div class="p-account-details-email">example#example.com</div>
</div>
<a class="p-menu-item p-menu-item_settings" href="account">Account settings</a>
<a class="p-menu-item p-menu-item_messages" href="#">Messages</a>
<a class="p-menu-item p-menu-item_logout" href="#">Sign out</a>
</div>
</div>
</nav>
Well, this is something I didn't even consider, it turns out this issue is down to Rails and Turbolinks!
Due to the way Turbolinks loads pages it screws up
$(document).ready
to fix this you need to use...
$(document).on "turbolinks:load"
http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks
Have you imported the JS file you are using in this page (new page where it stuck) too ? Try adding the code on another file also or move your js code to another js file and import it on that page.
Since it works at freshly loaded page the code itself shouldn't be a problem.
What comes to mind are class changes. Open up your browser's inspector and check if there are any class name changes that would resolve in loosing a listener.
Also try putting some console.log() inside each function so you are sure that both events aren't getting fired one after another.

HTML page keeps reloading after click event

Hi I have a small website, which keeps reloading after a click event. How can I prevent this?
PS: I'm only allowed to use pure JS.
HTML
Cookie Clicker
</head>
<body>
<header>
<h1>Points: </h1>
<span id="score"></span>
</header>
<div class="container">
<div>
<a href="" onclick="addPoints(1)">
<img src="assets/graphics/Friis.png" />
</a>
</div>
</div>
<script src="assets/scripts/cookieClicker.js"></script>
</body>
</html>
JS
var points = 0,
score = document.getElementById("score");
function addPoints(increase) {
console.log('hit');
points += increase;
score.innerHTML = '' + points;
};
You can modify only your html and it works:
<a href="javascript:void(0);" onclick="addPoints(1)">
Some people make this:
<a href="#" onclick="addPoints(1)">
But this is an anchor that scrolls your page to top. If you need to make by javascript, search about event preventDefault.
EDIT
Read about void javascript function:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
It's good to understand behaviour.
update your code to:
<a href="" onclick="addPoints(1);return false">
or
<a href="" onclick="return addPoints(1)">
and let your function addPoints return false. Upside of this is that you can actually let the href link to a page in case addPoints reaches a certain level for instance. If addPoints returns true the link will take the user to that page, return false will keep the user on the current page.
Instead of using onClick you can just change the href to run the function.
For example:
<a href="javascript:addPoints(1);">
that happens because you code contain
<a href="" onclick="addPoints(1)"> // These Can Reload Same Page
<a href="#" onclick="addPoints(1)"> // Modify upper code to these code

jQuery clone link and wrap/appendto/replace?

I just want to clone the link provided (i.e. href="xxx", not all the junk in between) and put that link on another link elsewhere on the page.
This is the link I want to clone:
<a href="/ReviewNew.asp?ProductCode=TRU%2DGDM49">
<span class="PageText_L479n"> |
<span id="write">Write a review</span>
</span>
</a>
This is where I want to clone the link to (on id sendreviewlink):
<li id="sendreview">
<a id="sendreviewlink" href=""><em>Write a Quick Review</em>
<span class="hwText">Earn $2 For Every Approved Review</span>
</a>
</li>
This is my JavaScript code which I have tried so far:
$('#write').closest('a').clone().wrap('#sendreviewlink');
$('#write').closest('a').clone().appendTo('#sendreviewlink');
$('#write').closest('a').clone().ReplaceAll('#sendreviewlink');
you can just set the href like this
$('#sendreviewlink').attr('href',$('#write').closest('a').attr('href'));
Here you go!
http://jsfiddle.net/bsXTM/
Not very polished tho, but ill leave that up to you.

Categories