I am trying to make drop down according menu for wordpress. but getting trouble for wordpress render code and js. may be i can fix something on my js or can do something on my wordpress function it will work. the working and raw html version is here if you click on projects then menu is open.
but wordpress menu render little bit different way, render version html is here
see the difference raw html is like before
<li><div class="link">Projects<i class="icon-down"></i></div>
and render wordpress version is <li>Projects so main difference is div and link class.
have any idea how can make it work ?
Try providing id of the <ul>that holds the lists in href.
<li>Projects
or
try using data-target
<li><a data-target="Id of the ul">Projects</a>
Related
I need this kind of behavior like when we click on make we can open the next model list in the same section
Please can you help me with how I can achieve this?
Im not sure about vanilla js but u can achieve this in ReactJS using react-router-dom package. you can add Link to each section which will replace that modal in the section without page reloading/refreshing.
Edit:
I have 2 ideas to to this with vanilla js but its a bit complicated and confusing.
using appenChild() change section child with onclick.
adding display: none to all and changing display: block for the once to display
this will not change reload or take to new page but u will need to add js for onclick for each route/model
I am using a carousel widget of the hugo framework but this is might be a very basic html question. I want a hyperlink in the text to do two things: change the item of the carousel widget and to focus on it.
My current code looks like the following:
linked phrase
This now successfully changes the item of the carousel to the desired one. But it does not focus to the carousel.
On the other hand I can focus on the carousel like this but of course the item of the carousel is not changed:
linked phrase
So how can I combine both? I tried also to include the data-target and data-slide attributes into a li-tag that surrounds the a-tag, which indeed triggers the change of item but which also ignores the href.
I also tried a span-tag within the a-tag without success either.
Maybe I need to do something with javascript? I tried but don't know javascript very well.
Thank you in advance!
OK, after all I solved the issue like the following. I created a javascript that scrolls to the carousel. I actually also built a button to connect that javascript. And within a table, I created cells that contain the attributes data-slide-to.
<th data-target="#hero_carousel" data-slide-to="4">
<button type="button" style="width:100%" onclick="document.getElementById('screen_focus').scrollIntoView({
behavior: 'smooth'});">Daten sammeln</button></th>
We are using Bootstrap nav-tabs on our new website's events pages to create different sections on a single page related to our events — About, Speakers, Travel, Register and so on.
Our events coordinator would like to be able to link directly to the individual speakers who appear on the Speakers tab from outside the website. Normally, this is pretty simple — http://domain.name/events/eventspage#speakerID.
However, because we're using nav-tabs, there isn't an easy and obvious way of creating this link. I've looked through posts here and elsewhere to see if anyone else has addressed this problem, but have yet to find anything.
The site was built using Bootstrap 3 and uses ExpressionEngine 2.10 as the CMS.
You can view a working example of how our events pages are set up at https://www.rjionline.org/events/rjicollab.
Any suggestions would be appreciated.
This is how it can work with jQuery:
Select an anchor within a JQUERY Tab from a link on anther webpage
You can adapt the code from there.
Here you can try this function:
function goToTab(){
var hash=document.location.hash,
prefix="tab_";
if(hash)
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show')
};
I am working on admin dashboard with html, css and javascripts. This is my first time working on it. I used bootstrap for the responsive layout and some bootstrap js (tabs, collaps). I also use chartjs for pie chart and line chart and sidr responsive menu. But the problem is with bootstrap tab and collaps function. They didn't work properly.When i click on the tab menu tabs are working but don't showing chart content in it. I spent lot of time to fix this. But i can't. I need your help.
Here is the link for the admin dashboard: http://demo.devkinz.com/admindashboard/
You are including the JavaScript, but aren't targeting the tab elements with it. From the docs, you also need to add in a bit of JavaScript to specifically target those tabs.
Alternatively, you should be able to add data-toggle="tab" to each of your dashboard_menu li elements.
In your code you have:
<ul class="list-inline pull-right" role="tablist">
<li class="active">Usage</li>
<li>Monthly</li>
</ul>
But you have no .tab-pane's with the id's: id="ussgemonth" & id="coletsmonth"
Not only do you have 2 missing .tab-pane with these ids -- since these are nested you have to follow the same structure as the parent.
I am using jquery tabify, http://unwrongest.com/projects/tabify/, to create a tab like feature for my menu.
Demo: http://jsfiddle.net/janjarfalk/6Y6Pa/1/
I am creating a menu like this:
<ul id="menu">
<li class="active">Home</li>
<li>Guestbook</li>
<li>Links</li>
</ul>
<div class="content" id="contentHome">Content for Home</div>
<div class="content" id="contentGuestbook">My guestbook</div>
<div class="content" id="contentLinks">Links</div>
The tabs will be added automatically as anchor link to my url, reading whatever that i have on my url. I need to have a url (for links tab only) such as {domain name}/{controller}/{method}/{articleId}#contentLinks-tab, examples:
http://www.test.com/site/shipping/5/#contentLinks-tab
http://www.test.com/site/delivery/3/#contentLinks-tab
while the rest will only be http://www.test.com/site#home-tab, etc. As you could see from the demo, the "{id}-tab" is auto generated based on the id. However, the problem arises if i am already on http://www.test.com/links/shipping/5/#contentLinks-tab of the links page, and if I were to go to other tabs like guestbook or home, the /shipping/5/#contentHome-tab will follow.
Can please advise how can I remove the /shipping/5/ even when I am on links tab, and hovering the rest of the tab? Sorry I was not able to provide much coding as I have no idea about doing it. Hence, really appreciate someone can shine some lights. Many thanks.
This is a tough one to answer, as jsFiddle is obviously missing the /shipping/5 part of the URL; And if understand correctly we're basically trying to change the functionality of the plugin.
At any rate, it's a little hacky, but you could try changing the href attribute of the Home and Guestbook links using javascript. So first give the Home and Guestbook links IDs:
Home
Guestbook
Then use jQuery to replace the URLs after Tabify has initialized:
$('#menu').tabify();
$('#home').attr('href','/site#contentHome-tab');
$('#guestbook').attr('href','/site#contentGuestbook-tab');
Which would equate to http://www.test.com/site#contentHome-tab, etc., effectively getting rid of the undesired part of the URL.
Or if that doesn't work (hard to tell when using such a plugin on jsFiddle), you could get even more hacky and instead add onclick listeners to the Home and Guestbook tabs:
$('#home').click(function() {
window.location.href = "/site#contentHome-tab";
});
I normally would never do something like this, but when you're working with plugins sometimes you gotta get a little hacky to achieve the desired effect =P
Hope this helps.