Content popup box called by href - javascript

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.

Related

JS code linked to a "close" button on a modal popup

Unfortunately I cannot post a working code/example because it's part of a huge HTML template and I cannot extract only the interesting part :( sorry for that.
Anyway, I have this popup that I define like this:
<a id='bookShopping' class="popup-text" href="#book-shopping-dialog"></a>
<div id="book-shopping-dialog" class="mfp-dialog mfp-hide">
random popup text...
<button>Close the popup!!!</button>
</div>
and that I call with
<a onclick="document.getElementById('bookShopping').click(); return false;" >PopUp!</a>
The popup itself has a "X" close button on the upper right corner, defined with
<button class="mfp-close">X</button>
I want MY BUTTON, inside the "random text", to be able to close the popup as well.
I tried:
1) Give my button the mfp-close class.
NOPE. My button will jump to the upper right corner
2) Setting the div to display:none and/or display:block
NOPE. The popup will close but IT WILL NEVER REAPPEAR.
So, my last resort would be to call the same code that the "mfp-close" class is calling. My problem is that I can only find the mfp-close class defined in CSS, nothing in JS.
If I try to "inspect" the "X" button, it will not give me any event linked to it, nor any JS associated with its "click".
I know that without the source code is hard to understand, but the general question is: where, in Chrome or Firefox, can I find ALL THE JS CODE EXECUTED when I click on an element?
Thank you in advance.
You appear to be using the Magnific popup jQuery plugin, which has an API including a close() method. You should call that method rather than try to hack around with classes.
http://dimsemenov.com/plugins/magnific-popup/documentation.html
$.magnificPopup.close();

How do I attach large bookmarklet code to href?

I have a bookmarklet that's about 100 lines long. Normally I'd attach the bookmarklet code to an anchor tag like so:
<a href=javascript:function(){ * TEH CODEZ *} >
This is of course so someone can click and drag the link to their bookmarks bar for simple setup of the bookmarklet.
The problem is I don't know how to do the same thing with a long bookmarklet. Right now I'm including the code directly into a DIV tag then using JS to attach the contents of the div to the href attribute of the anchor tag directly:
<div id="bookmarklet_code" class="hide">
<?php include('bookmarklet.js'); ?>
</div>
<script>
$('#bookmarklet_anchor').attr('href',$('#bookmarklet_code').html());
</script>
Sadly this doesn't work so I must still be doing something wrong. I can drag it to my bookmarks bar ok, but when I review the code, it has extra characters and doesn't work. Clearly I'm missing some fundamental information about how this is supposed to work.

Button onclick replace with DIV

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)

How to disable URL tooltip (status bar)?

When I click on a link (or hover with a mouse), the URL shows up at the bottom of the screen. That's the default behaviour in Firefox.
How can I prevent this ?
I'm making a website for tactile interfaces.
Thanks !
It would be better if you are using any other tag other than <a> if suppose you are using a
<div id='idofdiv'> tag
the query will be
$('#idofdiv').click(function(){
window.open('www.google.com');
});
hope this helps!!
Browsers don`t show what object will do onClick, so try this:
<div onclick="location.href ='http://www.google.com';"> click me </div>
Or you can use span which is inline element:
<span onclick="location.href ='http://www.google.com';"> click me </span>
you can achieve this using jquery,
first inlcude the jquery library in your page then
write the script in the page
$(function(){
$('[data-url]') //select all elements having data-url
.click(function(e){ e.preventDefault();
window.location.href= $(this).attr('data-url')})
})
and in the html
<span data-url="#/inbox" >Go to inbox</span>
<a data-url="mydraft.html">Drafts</a>
This is not possible and CSS is nowhere here, you just cannot do it with CSS, well you can use something like this to spoof the <a> link but I suggest you don't use all this, without any specific reason, anyways they'll find the URL from the source page
Spoofing
Demo
Note: Actually just checked, the demo is not working on the fiddle page but just make a local .html page and it will work

How to implement go-to javascript links? (plus highlight)

Is there a standard way for making all the links in a site, with the form href=#something, become 'go-to' links? (does this kind of links have a name?)
Let me describe these links further: When you click them, #something is added to the url. And if you go directly to that url from your browser, it takes you to that page, and then it scrolls down to that link.
Take this link as example: http://en.wikipedia.org/wiki/Universe#cite_note-Craig-45
Edit: As you can see, the div gets highlighted. How to make that happen automatically?
You're referring to anchor tags. Here's an example of a JavaScript-less internal link:
Go to my div!
<div id="myDiv">
This is content
</div>
If you want to send someone to myDiv using JavaScript, then you could do it this way:
<span onclick="window.location.hash = '#myDiv'">Go to my div!</span>
<div id="myDiv">
This is content
</div>
Here's a jsFiddle that demonstrates both the HTML and JavaScript methods.
You can also use a similar method to allow the use to navigate to page and then scroll them to the appropriate element on the page. Simply add the hash (#) plus the ID of the element to the URL. For example:
Go to my page and then div!
Or, with JavaScript
Go to my page and then div!
Use the id attribute of the a tag. Place the following at the location you would like to link to:
<a id="example"></a>
You can then link to that using:
Go to example
If you want to link to a specific anchor on a different page, simply use the # character after the URL:
Go to different page example
Here's an example.
The thing after the # is called an anchor, and is defined using the a-tag: <a id="something">.
If you just have #something as a link, like <a href="#something">, it will resolve relatively to the current page. So if your page is at http://myurl/mypage.html then it will open http://myurl/mypage.html#something.

Categories

Resources