a href= "javascript :;" class="filter" data-filter="" works fine, but it does not work with responsive meanmenu by meanthemes, can someone please help, thanks in advance.
I tried the option in meanmenu not to remove the class attributes but it failed.
Sorry, but I can't find the begining of something that would start to make any sense in your question.
It seems to be very specific to a particular context. You could perhaps succintly describe that context ...
... and specifically what you are trying to achieve.
Some hints, though :
<a href="javascript:§some code here§;" §other relevant attributes§>;" ...>
is generally not a good idea :
The HTML Anchor Element () defines a hyperlink to a location on the same page or any other page on the Web.
The element that is intended to react to a click by executing JS code is the
<button>
Second best would be a
<div>
or at last resort a
<span>
if you really need your action to be in-line, which would be a bit unorthodox from a UX point of view.
At any rate : give your clickable element an id attribute, then, in a distinct and separate .js file, define what it does like so :
document.getElementById('thatId').addEventListener('click', function(e){
/*
* Your code goes here.
* The event argument e holds all what you need to know about
* what was clicked.
*/
});
In the "Related" side bar, I see this very relevant thread. Read it seriously.
I am creating a webpage with a hyperlinks menu bar on the top of the page. When I click a link in the menu bar I am calling a javascript that will display portfolio item images in the body of the page. Means when I click web design it shows images tagged under web design. When I click mobile it displays images pertaining to mobile. I already have it working from a template that I downloaded. But when I am using the mobile responsive menu bar called meanmenu the javascript does not work. The mobile responsive menu only opens links to Web pages. I hope you are perceiving my problem now...thanks
Related
I tried including the 'tab.html' and ‘content.html’ into my 'index.html' (using w3school code: how to include HTML, found at: https://www.w3schools.com/howto/howto_html_include.asp), but the javascript and css elements do not work. The buttons don't work as intended. Look at:
https://rads-198409.appspot.com
If you resize (to a smaller size) the browser window, the tab is supposed to change to a drop-down menu, but the button does not work at all. I have checked the individual pages and they seem to work just fine, just not when they are combined.
Am I doing something wrong? Could someone help? All the code I used is from w3school and I have only modified the file names (tab.html and content.html to point to the right files). Below are links to the code:
Code for ‘tab.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
Code for ‘content.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol
Code for ‘index.html’ - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_include_2
This is why:
The links take you nowhere. #home (or # then whatever) is referring to an element in the page. This means that the link doesn't actually take you anywhere, unless you actually change the link to something else.
You're using a w3schools template. Come on, man!
Explanation on #1:
Say there was a footer at the bottom of a page, named "footer". To jump to that element, all you have to do is put #footer at the end of the url, and your browser will jump your screen to the bottom. Similarly, the #home hash means that it goes to a place where an element called home is. In this case, that's the top. The other buttons though, refer to different elements. The problem is that these elements don't exist in the template. To make them work, you must change the url to a real working url, or create elements with ids such as "news", "contacts", and such.
I've got an interesting question. I'm running Squarespace # buscadprimero.caminoglobal.org
and need to target the top-right button on the navigation (Ingresar, which means login) to bring up a Javascript form provided to me via embed code. The code itself works fine when included as a code block in the body of a page, but Squarespace only allows navigation buttons at the top to be hyperlinks. There's nowhere for me to add code to the button itself, being that it is a largely consumer platform and works great for straightforward application until you try to change the way it works.
They make an allowance for custom code via a "code injection" menu that adds whatever code you want to the HTML header of the page, so I've been trying to target this div, which does not have an id but who's class is external, with Javascript to replace its contents with an onclick listener to bring up this form. Tracking?
Here's my embed code, which like I said is fine:
<script>// <![CDATA[
!function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);
// ]]></script>
I've been trying document.getElementsByClassName("external").innerHTML; but when set to a var that returns undefined. New to Javascript but not afraid to learn. I'd like to figure out how to properly target the div, first of all, and then replace its contents (which currently is a link to my 404 page) with a Javascript function that activates on click. Thanks for the guidance!
I've tested the following on your site in Chrome, and have successfully changed the content. The page contained multiple ".collection" elements, so i select only the last one:
JavaScript / jQuery
$("#mainNavigation .collection").last().html("<a href='/newlink'>Test</a>");
Thanks to the great help of #Arg0n, I've now got a working login form that appears in the top-right-most button of my site. Using:
$(function() { $("#mainNavigation .collection").last().html("<span id='cc-login'>Ingresar</span>"); });
as the function to replace the contents of the div in question, I inserted <span id='cc-login'>Ingresar</span> as the call to the provided embed code:
<![CDATA[ !function(e,t){e._cc={}, e._cc.host="https://www.coachingcloud.com/";var n=function(){var n=t.createElement("script"),c=t.getElementsByTagName("script")[0];n.src=e._cc.host+"login.min.js",c.parentNode.insertBefore(n,c)};e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document); // ]]>
Turns out that a little jQuery was helpful in accessing the desired div, and setting its html contents was a bit beyond my area of expertise.
Many thanks to the StackOverflow community for helping me learn about targeting page elements with Javascript to procedurally manipulate its contents.
I want to make a one page layout for my webpage.
And I want to make that so, when i click a button in my navigation bar, it to display a div i've created for my content, but normally is hidden. Also, when i click on the logo of the page, the page goes to it's original state (without the content div showing).
I have no idea how to do this.
I guess your using Javascript and / or PHP for this?
Can you guys give me an example how to do this?
Example: http://www.basjansenmedia.nl/
When you go to themeforest, there's a separate category called One Page themes. Do have a look at it. Or, why not you Google it for yourself? Anyways, a few tutorials would be:
One Page
15 Useful HTML5 Tutorials and Examples For Beginners
Coding a CSS3 & HTML5 One-Page Website Template
Single Page Apps with AngularJS Routing and Templating
Assuming you use jquery
$('#myButton').click(function() {
$('#myNewDiv').show();
$('#myOldDiv').hide();
}
($'#logo').click(function() {
$('#myOldDiv').show();
$('#myNewDiv').hide();
}
I'm trying to put together a website that no-longer uses frames (my previously preferred method) but a singe page format.
One big problems I've found is that each page on the site will use the same menu. Now it occurs to me that if I amend the menu at a later date, then I'd have to change it on every page manually. This seems very time consuming and Inefficient.
Can anyone suggest ways I can alter the menu code once and have it on every page? I was thinking initially of embedding a javascript anchor to a js file on each page, then I would only have to change the js file. Are there better ways to do this?
The menu is a simple image and mix of text and anchor links.
I can program HTML/JS/CSS/C++ ... and willing to look at others if necessary to achieve my goals.
Thank you.
Make a separate partial view file containing your menu code and than include it on each page you need it to use the menu.
In PHP:
<?php require_once(__ROOT__.'/mainMenu.php'); ?>
In ASP something like:
<%# Register src="~/mainMenu/mainMenu.ascx" tagname="MainMenu" tagprefix="uc" %>
<uc:MainMenu ID="MainMenu" runat="server />
Ideally you can expand this logic and create a master template page and than feed just the dynamic content in it - that keeps all your code on one place and makes changes very simple.
given up tearing my hair out, can anyone help?
I'm trying to get the active page to apply a separate style, in the example same as when you click on test1 ie have the dark background hen on the homepage or about us.
http://www.tait-design.com/devsites/test-nav/index.asp
the main pages don't go anywhere ie test1 but the page test1-1 and test2-1 do as examples
I think the issue will lie in the js
http://www.tait-design.com/devsites/test-nav/js/accordion.js
and maybe the css (can't put the full url in)
/css/black.css
I've made a couple of the classes different colors on the text to help identify
I've picked up someone else's work I suspect it's a template site, which has been altered, the left nav wasn't done as an include so each page had a seperate markup to make the active page ...look active. I've changed this to asp just for the includes to work off my site, it will be php though.
This can be done purely in CSS, no Javascript is required.
First, give unique classes to each of the body tags on your pages.
For instance, on the home page it would be something like <body
class="home">.
Then give the anchor tag of the matching link the same class (ie, - see that I've added a
second class to the link).
Now you can specifically style that link in CSS when it's the active
page:
body.home #menu-1 a.home {
// whatever styling you like
}