I've tried a few different ways to change the title of a link within the navigation block through Javascript, but to no avail.
Is there something that I am missing?
Here's the original code via the site:
<div id="left-side" class="ic-app-course-menu list-view" style="display: block">
<span id="section-tabs-header-subtitle" class="ellipsis">Sandbox</span>
<nav role="navigation" aria-label="Courses Navigation Menu"><ul id="section-tabs"><li class="section">Home</li><li class="section">Course Syllabus</li><li class="section">Modules</li><li class="section">Grades</li><li class="section">People</li></ul></nav>
</div>
Here is the Javascript I'm using to attempt to change the title "Course Syllabus" to just "Syllabus"
if (ENV.current_user_roles.indexOf("admin") < 1){
$( document ).ready(function() {
document.querySelector('#section-tabs a.context_external_tool_375').innerHTML = "Syllabus";
});
}
Would appreciate some help :-)
You have the exact right idea, and your code should work as expected. However, your conditional to check whether the user is an admin should really come inside of your $(document).ready(). Having said that, it will still trigger the way you have it now.
As such, there can only be two possible things causing your script not to work for you:
You have forgotten to include jQuery
Your condition is not evaluating to be truthy
Including jQuery and substituting the condition for one that is always true shows the name change working, as can be seen in the following example:
$(document).ready(function() {
if (1) {
document.querySelector('#section-tabs a.context_external_tool_375').innerHTML = "Syllabus";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left-side" class="ic-app-course-menu list-view" style="display: block">
<span id="section-tabs-header-subtitle" class="ellipsis">Sandbox</span>
<nav role="navigation" aria-label="Courses Navigation Menu">
<ul id="section-tabs">
<li class="section">Home</li>
<li class="section">Course Syllabus</li>
<li class="section">Modules</li>
<li class="section">Grades</li>
<li class="section">People</li>
</ul>
</nav>
</div>
Hope this helps! :)
Related
I've never tried Javascript before and looked around, but the tutorials I've found would take me weeks to figure out (attention/focus issues + I don't even know what words I want to search for) and none of the solutions I've searched for solved it, and I don't know enough to extrapolate it from other answers.
Can someone give me an example of this code (from w3School) extended to also toggle more dropdown menus? It has to be usable with keyboard like this one is.
Currently it's only handling the menu with an ID of "dropperso" and can open the Personal menu, I need the "openMenu" function to also react to the ID "dropsites" and be able to open the Other Sites menu. A note that the button and affected ID-having div are siblings.
No JQuery please.
JS:
function openMenu() {
document.getElementById("dropperso").classList.toggle("dropopen");
}
HTML:
<div class="dropdown">
<button onclick="openMenu()" class="drophover">Other Sites</button>
<div id="dropsites" class="dropdown-content">
A link
</div>
</div>
<div class="dropdown">
<button onclick="openMenu()" class="drophover">Personal</button>
<div id="dropperso" class="dropdown-content" style="right: 0;">
A link
A link
</div>
</div>
All that the .dropopen css class does is change the display of .dropdown-content from none to block.
I tried to search for my specific problem and all I found was either way beyond my ability to understand, "use JQuery" (I'm limited and can't use JQuery), or "use this other code (that doesn't work for mine)".
It works if I just copy the whole thing and make one function for each menu, but I get the feeling that's kinda bad spaghetti coding, and I can't compress this on my own without an example that works to learn from.
I'd be VERY grateful if you could solve that for me so I can use that later, and even MORE grateful if you could either explain how you made it work or link to the specific parts of documentation that explain what you're using.
If you want to toggle them all with one click use querySelectors to get all the dropdown menus and toggle each of them like this :
const dropdownMenus = document.querySelectorAll(".dropdown-content")
for(const menu of dropdownMenus){
menu.classList.toggle("dropopen")
}
but if you want to toggle each of them with same function and not writing a function for each menu you can do like this :
JS :
function openMenu(id) {
document.getElementById(id).classList.toggle("dropopen");
}
HTML :
<div class="dropdown">
<button onclick="openMenu('dropsites')" class="drophover">Other Sites</button>
<div id="dropsites" class="dropdown-content">
A link
</div>
</div>
<div class="dropdown">
<button onclick="openMenu('dropperso')" class="drophover">Personal</button>
<div id="dropperso" class="dropdown-content" style="right: 0;">
A link
A link
</div>
</div>
function openMenu(id) {
document.getElementById(id).classList.toggle("dropopen");
}
<button onclick="openMenu('dropsites')" class="drophover">Personal</button>
<button onclick="openMenu('dropperso')" class="drophover">Personal</button>
<div class="drop-down flex-row-AI-center" data-dropdown>
<button class="drop-btn" data-dropdownBtn>Categories</button>
<div class="dropdown-content flex-col" data-dropdown-content>
Action
Adventure
Anime
Comedy
Thriller
Fantasy
</div>
</div>
</div>
You have to give all the dropdown same ids/class/dataset-attributes
function toggleDropDown(e) {
const isDropdownBtn = e.target.matches('[data-dropdownBtn]');
//as long as user clicking inside of dropdown it won't close
if (!isDropdownBtn && e.target.closest('[data-dropdown]') != null) return;
let currDropdown;
if (isDropdownBtn) {
currDropdown = e.target.closest('[data-dropdown]');
currDropdown.classList.add('active');
}
document.querySelectorAll('[data-dropdown-content].active').forEach(dropdowm => {
if(currDropdown === dropdowm) return
dropdowm.classList.remove('active')
})
}
I have a menu on the site in two places. One is made by text, and the other by pictures. You can click on both.
I want that when you hover over a specific item in a text menu (for example, under number 2), the picture with the same number changes (for example, under 2).
Code for text menu:
<ul>
<li class="page_item">
Test 1
</li>
<li class="page_item">
Test 2
</li>
</ul>
Code for Pictures menu:
<div class="project__card project__card-design">
<div class="project__card-design-bigelem">
</div>
<div class="project__card-design-bigelem">
</div>
<div class="project__card-design-bigelem">
</div>
</div>
Screen shot with Picture and text menu:
Screen shot with Picture and text menu
I will be grateful for any help!
Since I was looking for solutions that could identify the element with which number was highlighted. But so far I don’t even have ideas on how to do this.
All thanks in advance for any help!
If you like for this behaviour you can do this
hover: nav1 > imageNav1 ect...
You can get the index of the hover item and match that to the image nav item. Sorry for the markup, it's just to show you how you can implement it. You can also choose to do whatever after the matching is made in the mouseenter
$(".js-hover").on("mouseenter", function () {
const hoverIndex = $(this).index();
const $imageListItems = $(".image-list > li");
$imageListItems.removeClass("image-list__item--selected");
$imageListItems.eq(hoverIndex).addClass("image-list__item--selected");
});
.image-list__item--selected {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
<li class="js-hover">text</li>
<li class="js-hover">text</li>
<li class="js-hover">text</li>
<li class="js-hover">text</li>
</ul>
<ul class="image-list">
<li>image1</li>
<li>image2</li>
<li>image3</li>
<li>image4</li>
</ul>
Here's a solution with pure js, works for elements that are not parents using ids.
html
<li id="child1" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent1"> </div>
<li id="child2" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent2"> </div>
<li id="child3" onmouseenter="customHover(event)" onmouseleave="handlemouseleave(event)"></li>
<div id="parent3"> </div>
and heres the js
function customHover(e){
let id = e.target.id;
let idNumber = id.slice(id.length - 1);
document.getElementById(`parent${idNumber}`).style.border = '1px solid red';
}
function handleMouseLeave(e){
let id = e.target.id;
let idNumber = id.slice(id.length - 1);
document.getElementById(`parent${idNumber}`).style.border = 'unset';//or whatever you need to change the styles back to the original
}
there are many solutions , with an without using libraries. I think you may use some jquery if possible , and if not you should search for addeventlistener (the advanced way)
https://api.jquery.com/hover/
is a good example of doing what you are trying todo .
var pageitemcount=0;
$( ".page_item" ).hover(function() {
pageitemcount++;
$.post("/mypageitemcounter.php",{pageitemcount:pageitemcount});
$(this).parent().append( $( "<span>"+pageitemcount+"</span>" ) );
});
The above part is for php , still can be used in a plugin.
If you are in wordpress environment , you have to dig into how to write wp plugins also. Trying to achieve this in an environment , and then applying the same to your custom wp plugin is the way to go. Do not change the existing plugins, or themes if possible. This may cause headaches after an update.. In wp environment, writing a custom plugin is the way to go. You should tag your question as wp-plugin if possible.
Im using Bootstrap to create a tab content. It works fine outside netsuite. but once i put this page into netsuite it gives me an error saying "Cannot assign to read only property 'preventDefault' of error"
My page is like this
HTML:
<ul id="hireTab" class="nav nav-tabs" data-tabs="tabs">
<li class="active">One
<li class="active">Two
<li class="active">Three
</ul>
<div class="tab-content">
<div id="tabOne" class="tab-pane active">
One, one one
</div>
<div id="tabTwo" class="tab-pane active">
Two, two two
</div>
<div id="tabThree" class="tab-pane active">
Three, three three
</div>
</div>
JS:
<script type="text/javascript">
jQuery(function() {
jQuery('#hireTab a').click(function(e) {
e.preventDefault();
jQuery(this).tab('show');
});
});
</script>
On a closer look i found that the tab changing is working. but after the tab changes, the preventDefault doesnt stop the page junmping.
Any idea why is that or any solution? I am new to netsuite so bear with me if this question is stupid.
UPDATE: 1 hr of googling lead me to this page. http://backbonejs.org/#Router
So it appears that backbone is hijacking my browser and changed the behavior of it.
The syntax href="#xxx" is intercepted by backbone and interpreted into "HOME_URL/xxx".
The problem now is how to stop backbone from doing this when i dont want to mess with the backbone code while im not sure how it will effect other parts of the project.
My temporary solution is event.stopPropagation().
Final Working code is:
<script type="text/javascript">
jQuery(function() {
jQuery('#hireTab a').click(function(e) {
e.preventDefault();
e.stopPropagation();
jQuery(this).tab('show');//Maybe this line is not needed
});
});
</script>
What this function does is it kills the request and stop it from going up the DOM tree.
Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
It is a brutal way of doing this. Im sure there are more elegant or native of getting this to work.
I know this is a topic discussed here many times, but none of the solution of the site have helped me....
I'm having two nav items and both of them load two different PHP files by using jquery ajax. I'm using jquery mobile.
My problem is that whenever i click on the other nav item the other one doesn't clear itself, so basically i get div on top of div.
I've tried .html(""); but hasn't worked for me so far.
HTML:
<div id="tabs">
<ul>
<li><a class="classloader1">Upcoming</a></li>
<li><a class="classloader2">History</a></li>
</ul>
</div>
<div id="content"></div>
JS:
$(".classloader1").click(function(){
$("#content").load("get.php");
})
$(".classloader2").click(function(){
$("#content").load("history.php");
})
I would try a different tab structure like
<div id="tabs">
<ul>
<li><a class="classloader one">Upcoming</a></li>
<li><a class="classloader two">History</a></li>
</ul>
</div>
where both elements share the classloader class name. Then I would use jQuery .html() to load the content but returning the specific file depending on the clicked tab like :
$(".classloader").on("click", function (event) {
var file = $(event.target).hasClass("one") ? "get.php" : "history.php";
$("#content").html(function () {
return $(this).load(file);
});
});
If you have more than two tabs, you could use a switch statement to set the value of the file var.
See DEMO
UPDATE : see DEMO using jQuery mobile.
I am new to javascript and especially dojo and I got stuck to, I assume quite simple task, but I just cannot solve it.
Basically what I'm trying to do is the following:
When I click on a listitem I should be sent to another view. I am doing this with:
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="moveTo:'#'" onClick="transitionTo('#recommend',1);">Recommend App</li>
Now the div with id=recommend` has got 2 listitems.
<div id="recommend" data-dojo-type="dojox.mobile.ScrollableView">
<div class="belowTab" style="width: 100%;"> </div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem">via Email</li>
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="moveTo:'#'" onClick="postToWall();">via Facebook</li>
</div>
</ul>
I want to make both listitems visible if some particular function returns true otherwise hide 2nd listitem and show just 1st.
I want to know the logic and how to approach this idea of integrating an if-statement together with the div
There is a rather unpoorly documented method of creating event hooks as markup which i will demonstrate here. However it would be better to create a function in your codebase and then set it as a dojoProps attribute, e.g. function myonclick() { ... } and <div data-dojo-type="dijit._Widget" data-dojo-props="onClick: myonclick"></div>.
To achieve this, you need to figure out which events the View widget offers. Easist way to do this is to simply open the dojotoolkit-src/dojox/mobile/View.js file - the ones youre looking for are probably onStartView || onBeforeTransitionIn?
Via markup, we now create dojo/method to onBefore.. so that you may manipulate children in your list. You have a stray closing </div> tag by the way.
<div id="recommend" data-dojo-type="dojox.mobile.ScrollableView">
<div class="belowTab" style="width: 100%;"> </div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem">via Email</li>
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="moveTo:'#'" onClick="postToWall();">via Facebook</li>
</ul>
<script type="dojo/method" event="onBeforeTransitionIn" args="moveTo, dir, transition, context, method">
// onBeforeTransitionIn(moveTo, dir, transition, context, method):
var listWidget = dijit.byNode(dojo.query("#recommended ul")[0]);
// say you have a function with true/false return, if item should show
dojo.forEach(listWidget.getChildren(), function(Item, idx) {
dojo.style(Item.domNode, {
display: showItem(Item) ? '' : 'none'
});
});
</script>
</div>