I want to replace button with a DIV in template design of my blog.
The code for button is
<button onClick="menu1.toggle();" class="sideviewtoggle fa fa-bars"></button>
And jquery script I am using for it is
jQuery(function(){ // on DOM load
menu1 = new sidetogglemenu({ // initialize first menu example
id: 'togglemenu1',
marginoffset: 10,
downarrowsrc: 'toggledown.png'
})
})
It opens a siedbar toggle menu on click. I don't want to use <button> tag for this purpose, instead I want to use a <div> tag so that the functions onclick instead of button. I think that it can be done by using a small code of Javascript but as I am new to Javascript so unable to do it myself?
What should I do?
Here is the url to template.
http://testing-prov4.blogspot.com
It sounds like you would like to use a div element to trigger the slideout menu instead of a button element. This can be easily accomplished. Your current code reads:
<button class='sideviewtoggle fa fa-bars' onClick='menu1.toggle();'></button>
You can replace this with:
<div class='sideviewtoggle fa fa-bars' onClick='menu1.toggle();'></div>
without changing any functionality. (CSS changes just a bit)
Related
I use Wordpress and I would like to have a plugin that allow me to open a box/popup content for "a href" call.
Something like this:
Text use it in a div tag
this is the code i use:
<div class="tracklist download-button2" style="display: initial-block">
<a href="#">
<span class="header-clip2">
<span class="header-triangle2"></span>
</span>
<span class="header-bg2"></span>
<div class="clear"></div>
<div class="file-icon-inner2">
<i class="icon-download2"></i>Tracklist
</div>
</div>
please check http://af-sound.ro "Tracklist" button
so whoever will click on Tracklist, i would like to have a box popup opened with the content inside.
There will be more "tracklist" buttons, so i dont need just a global popup box. I have tried with Anything popup but that doesn't work as it use a shortcode like: [anythingpupup=id1] which cannot be used in "a href" call
The first issue here is that you are missing the closing anchor tag
Secondly, you should give the box which you'd like to open an "id" attribute.
<div id="popup-box"></div>
Wherever you place your anchor tag, you can then reference the box using
Click to open popup
The "#" will refer to the id attribute of the matched element.
There is no need to install an entire Wordpress plugin. You can use something like Bootstrap Modals
The instructions are very straight forward to help you set it up.
I think you don't need a plugin for that. You could use just javascript to open such popup from an anchor. Here is an example code:
Open Popup!
<script language="javascript">
function Popup()
{
var win = window.open('', '',"toolbar=no, width=100, height=20");
var doc = win.document.open();
doc.write('<html><body> <b>Hello!</b> </body></html>');
doc.close();
}
</script>
As you can see, you can add any dynamic html as content of the popup, including the html that you want in the doc.write method.
Cheers!
There are a number of ways of achieving this, depending on the result you want to get.
Maybe the simplest way is not using a plugin at all; just add a hidden div with the content of the popup in it. And then, from jQuery, capture the click of your tag a and show up that hidden div. From CSS you can style that div in any way you need.
If you want to use a plugin, you could use Fancybox or any other similar, given the fact that you already have jQuery on your website.
I'm not sure how to entitle my question correctly, but here is the problem:
I have a number of div elements on a page and trigger links pointing to each of those elements with anchor ids. Those elements will work as popups.
Show Popup #1
Show Popup #2
Show Popup #3
<div id="pop1" class="popup">...content here...</div>
<div id="pop2" class="popup">...content here...</div>
<div id="pop3" class="popup">...content here...</div>
Now what is the effecient way to associate multiple links to divs for toggling them on link click?
Coding them one by one is not a good option because there can be too many elemens on a page.
$("#t1").click(function(){
$("#pop1").toggle();
});
Since your triggers have a common class trigger, you can do:
$(".trigger").click(function(){
$(this.href).toggle(); // href is "#pop1", "#pop2", etc.
return false; // prevent default action of anchor tag click
});
You can add data-attribute (for example, data-div-id) to your link tags that will contain associated div's id:
Show Popup #1
And then you just trigger it like this:
$('a.trigger').click(function(){
$('div#' + $(this).data('divId')).toggle();
}
I have a page in which the user can click on a date in the sidebar, which automatically adds that date to a form, and also scrolls down to the form using AnimateScroll.js. This works fine.
I also have a button in the main part of the page that, when clicked, again uses AnimateScroll to scroll up to the top of the list of dates so the user can click their desired one. This too works fine, but what I'd like to do is also highlight the paragraph above the dates list in red so the user clearly sees what they're supposed to do. AnimateScroll is called like this:
<a class="button" onclick="$('#dates').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});">Book Now</a>
I'm sure I should be able to add something else to the code executed onclick, probably jQuery, but I don't know what that is. Can you help?
There are several ways to do this. One quick way is:
Just embed this line of code there
$('#dates').css('color','red');
(In case the container where the date appears has the id 'dates', otherwise check the class or id of the container and change the selector accordingly).
Give an id to the paragraph Say id="Paragraph" <p id="Paragraph"> Please chhose the date</p>
Now, Add a line in your onclick
<a class="button" onclick="$('#Paragraph').css('color','red'); $('#dates').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});">Book Now</a>
This will acheive what you want..!!
for maintanance it would be MUCH nicer to write the javascript in an external javascript file. also for many buttons you don't need to write the onclick every single time you can just have it at one place
<a class="button" href="javascript:;">Book Now</a>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button').on('click',function(){
$('#dates').css({
'font-size' : '10px',
width : '30px',
height : '10px'
});
$('#dates').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});
});
});
</script>
My Javascript knowledge is extremely low, so sorry for this stupid question, but I have searched everywhere.
I'm using a single page scrolling script, but trying to add a navigation bar. The documentation references this for changing to a page:
$(".main").moveTo(3);
How do I make a link to run this? I just want a Hyperlink that runs this when clicked, but cannot work out how to do it.
You can use the selector for the hyperlink as
$('a').click(function () {
// paste your function here..
})
You can use a specific selector such as its class as
$('a.move').click(function () {
// function
}
Where its HTML will be as
Click Me
No, you don't. If the hyperlink does not link to a resource, it's not a hyperlink and you should not use the <a> tag. What you're describing is a "click to do something" element, which is the <button> element. Simply use this:
<button onclick="$('.main').moveTo(3)">click this</button>
And then use some CSS to make the button look like whatever you need it to look like (button default styling is just CSS, so turn off the border and background color, and now it looks like plain text)
I am working in a software which has its interface written in JavaScript
I am trying to add an HTML button to the interface by defining a button in the HTML main code, check how I did this http://dpaste.com/691324/
The problem is,, the button appears before the page loads, maybe because the HTML loads before the JS files, I don't know exactly !!! But it really looks ugly, when the button show before the page, and I want to find some trick that can delay the button or to be loaded at the same time with the javascripts..how is this possible?
I am not a javascript person, but if you are using JQuery, it should go something like this
$(document).ready(function() {
document.getElementById('divId').innerHtml = '<input type="button" value="button">';
});
'divId' would be id of Div tag (place holder) covering input tag.
Or you can also call some plain javascript function which sets innerHtml of 'divId' on 'Body' tag's onload event,
Well I think is that you should use an anchor instead, and if you want, style it as a button. Here is the way to create the button with pure JS:
var anchor = document.createElement('a');
anchor.setAttribute('href', '/opentripplanner-tripArabic/index.html');
anchor.setAttribute('class', 'please use CSS'); //inline styling is dirty
anchor.innerHTML = 'use the Arabic interface';
document.getElementById('header').appendChild(anchor);
I recommend to use anchors because you are not using a form, and you only pretend to redirect the user to another page. Either way if you want still the button, you can use document.createElement('button'); and asign the property onclick: button.onclick = function(){... instead of the href setting.
Another thing you can do is to hide the button with CSS: display:none and on load wet the element and remove the style: button.style.setProperty('display', ''); or either way use the CSS propperty visibility: hidden.