MVC 3 and fancybox 2.
Should be straight forward but somehow I have made a mess of things.
First since I am using this only on one page (cshtml) I add the scripts via:
Html.AddScriptParts(#Url.Content("~/Scripts/fancybox2/source/jquery.fancybox.pack.js?v=2.1.5"));
Html.AddCssFileParts(#Url.Content("~/Scripts/fancybox2/source/jquery.fancybox.css?v=2.1.5"));
When I look in the debugger I see jquery.fancybox.pzck.js loaded. When I inspect the element I do not see the jquery.fancybox.css styles applied...(css is default so maybe there aren't any to apply?)
My onready is:
$(function ()
{
$(".fancybox").fancybox();
});
and my link is:
<div id="ThreadLink">
<a id="ForumFrameLink" href="https://www.google.com" class="fancybox">asdf</a>
</div>
It is acting as though my onready is not attaching...in other words it just follows the link to Google.
What am I missing?
TIA
In the JSFiddle link you provided: http://jsfiddle.net/ramjet/54kag/
Use the following JS:
$(document).ready(function() {
$("#ThreadLink a").fancybox({
type: "iframe"
});
});
And then your HTML simply becomes:
<div id="ThreadLink">
<a id="ForumFrameLink" href="http://www.foxnews.com">asdf</a>
</div>
It seems that type: "iframe" needed to be set. After glancing over the documentation, it looks like you can also just set the class of the a to iframe instead to get the same functionality.
"Corrected" fiddle for your viewing pleasure: http://jsfiddle.net/54kag/1/
Related
How do I update content loaded with Jquery .load() with javascript?
I'm using two placeholders on every page: one with the navigation bar, and one with the main skeleton of the content, like this:
<body>
<div id="nav-placeholder">
</div>
<div id="content-placeholder">
</div>
</body>
The nav bar and content are both in seperate files and are loaded into the pages with an external javascript file like this:
$(function(){
$("#nav-placeholder").load("nav.html");
});
$(function(){
$("#content-placeholder").load("content.html");
});
So far, it all works nicely. Now, I'm trying to alter the content separately for each page (with JS)
Part of content.html is for example
<h2 id="subheader1">Title</h2>
I'm trying to change the #subheader1 content in the javascript file like so:
$(function(){
$("#nav-placeholder").load("nav.html");
});
$(function(){
$("#content-placeholder").load("content.html");
});
$(document).ready(function() {
document.getElementById("subheader1").outerHTML = "test" ;
});
but that doesn't work (this is aimed at all pages, but it still doesn't work). Probably because it's only seeing the placeholder DIV in index.html and not it's content?
I tried placing the subheader1 div in the index.html to test, and then it did work, but that would take away the efficiency of the placeholder.
Is there any way to do this (or another way to be more efficient with pages with the same (DIV) layout but different text?)
Thanks!
The load method is not synchronous, so
$(document).ready(function() {
document.getElementById("subheader1").outerHTML = "test" ;
});
is executed before the html is loaded in the page.
The doc suggest using a callback function.
it is executed after post-processing and HTML insertion has been performed
I had success using this in my js file:
$(document).ready(function() {
$(function(){
$("#nav-placeholder").load("./nav.html", function() {
document.getElementById("insideNav").outerHTML = "It works !" ;
});
});
});
with <h2 id="insideNav">Original Nav Bar</h2> in my nav.html.
I've spent enough hours googling this to feel comfortable posting this- even though i'm sure it's a simple solution. I'm just getting into a webdev so pardon my ignorance. As the title says i'm simply trying to have the content of an HTML file appear in a div after a button is pressed. Here is my code:
HTML:
<button id="button" class="linkGeneration">Press me</button>
<div id="renderArea" class="contentArea">
<!-- CONTENT SHOULD GENERATE HERE -->
</div>
Javascript:
$(document).ready(function() {
$('button').click(function(e) {
e.preventDefault();
$("#renderArea").load($(this).attr('../html/content.html'));
});
});
I'm not getting any errors, the button simply does nothing. I do have Jquery properly applied in my HTML as well.
Any suggestions on how to fix this OR a different method that might be simpler? Thanks.
The button doesn't have an attribute named ../html/content.html, so $(this).attr('../html/content.html') is not returning anything.
If you want to load from the URL, just use that as the argument to .load(), you don't need .attr().
$(document).ready(function() {
$('button').click(function(e) {
e.preventDefault();
$("#renderArea").load('../html/content.html');
});
});
I am having anchor tag in my page. I like to trigger click event onload . Which means I wanna open this link "whatsapp://send?text=test&phone=+123456789" go to whatsapp. The link is working if you manually click, but not working onload page. Same result with jquery. Is there anyway to do this?
This is what I have:
<body onload="document.getElementById('openwhatsapp').click();">
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+123456789">whatsapp</a>
</body>
To clarify this, there is no problem for the link with http://, its working. Just not working for whatsapp:// maybe?
Firstly, don't use inline JS. It's just not right.
Now coming to the solution. Why don't you try something like
document.body.onload = function(){
window.location.href = "whatsapp://send?text=test&phone=+123456789";
}
If you still want to stick to inline JS, I'd suggest prefix your code with javascript: since some browsers otherwise ignore inline JS.
So now your code would become
<body onload="javascript:document.getElementById('openwhatsapp').click();">
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+123456789">whatsapp</a>
</body>
Maybe location.href is a good solution for you.
<body onload="location.href = 'whatsapp://send?text=test&phone=+60123456789">
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+60123456789">whatsapp</a>
</body>
try something like this
<href="intent://send/0123456789#Intent;scheme=smsto;package=com.whatsapp;action=android.intent.action.SENDTO;end">
what is happening when u click on the link ? any error or blank page ?
You can use, $(window).load(function() {}) or even $(document).ready(function() {})
$(window).load(function() {
location.href = 'whatsapp://send?text=test&phone=+60123456789'
});
$(window).load(function() {
location.href = 'whatsapp://send?text=test&phone=+60123456789'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a id="openwhatsapp" href="whatsapp://send?text=test&phone=+60123456789">whatsapp</a>
Run this snippet, it is working
If you want to run it on load then why you are not using :
window.location = "whatsapp://send?text=test&phone=+123456789"
I have the following in the <body> of my HTML
<div class="exact">
<div> <a id ="button_some_id" href="#"> Toggle Hidden </a></div>
<div id="item_some_id" hidden>This is hided</div>
<script type='text/javascript'>
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
</script>
</div>
Link to jfiddle
The idea here is I want someone to be able to click on the Toggle Hidden link and it will show some hidden content (and when it is clicked again, hide it). However the javascript is not being triggered. Any help is greatly appreciated
You haven't inputted JQuery or JQuery UI into your JSFiddle's resources. Once putting them in, it works:
https://jsfiddle.net/tj8o8gwf/2/
$("#button_some_id").click(function() {$("#item_some_id").toggle();}); //works fine
Look at the External Resources section on the left hand side of the fiddle.
You also need to make sure the DOM is loaded.
$( document ).ready(function() {
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
});
You need to make sure that jQuery is inputted
$(document).ready(function () {
$("body").on("click", "#button_some_id", function () {
$("#item_some_id").toggle();
});
});
Try this
//HTML
<div class="toBeHidden" hidden>This is hided</div>
//JS inside your click
if ($(".toBeHidden").is(":visible"))
{
$(".toBeHidden").hide('slow');
}
else
{
$(".toBeHidden").show('slow');
}
Im' stuck in a probably easy problem. Sorry I'm a beginner !
I have this
<div class="icon-1"></div>
<div class="icon-2"></div>
<script>
$(function() {
onclick('icon-1').openurl('http://acdefg.com');
onclick('icon-2').openurl('http://ghijkl.com');
}
</script>
...I mean, that if I click on "icon-1", then I go to URL "...."
If i click on "icon-2" then I go to URL "..."
etc.
Could you please help me ?
Well, you could define something like:
document.getElementByClassName("icon-1").onclick=function(){
window.location.href = 'http://abcdef.com';
};
You could also pull in an elements attribute (for examle, data-href) to full in the variable (instead of setting it specifically in JS, then you would only need 1 JS function for all occurrences).
However, can I ask - why don't you just use HTML a tags with href values?
Try this using jQuery (which is bundled with WordPress): https://jsfiddle.net/wu24bnbc/2/
<div class="icon-1">Icon 1</div>
<div class="icon-2">Icon 2</div>
<script>
jQuery(function() {
jQuery('.icon-1').click(function() {
window.location.href = 'http://acdefg.com';
});
jQuery('.icon-2').click(function() {
window.location.href = 'http://ghijkl.com';
});
});
</script>
Edit: I think you need to use jQuery instead of the $ shorthand with WP.