Here is what I have in my member.php for my fancybox:
<script type="text/javascript">
$(document).ready(function()
{
$("a#uploadpage").fancybox({
'titleShow' : false
});
});
</script>
.
.
.
<a id="uploadpage" href='uploadpage.php'>Change Image</a> <br/>
This works perfectly, and by perfectly I mean it opens the fancybox containing the php code in uploadpage.php. Once the user pushes the submit button in uploadpage.php to upload there image I want it to either display an error message(invalid file type or file size too big), or a progressbar if the image is a valid file type and below 1MB. How do I do this within the SAME FANCYBOX? (I have the code for the error messages and progressbar already so I just need to know how to either refresh the fancybox or how to use javascript to accomplish this.)
Thanks a lot, I greatly appreciate it.
-Matt
I don't know if this will work, I've never used fancybox the way you are trying to use it, but, here's my suggestion: you could try using a class name instead of an ID. The anchor would be <a class="uploadpage" ...> instead of the id you use now. Also, change
$("a#uploadpage").fancybox({
to
$("a.uploadpage").fancybox({
fancybox makes a new instance of the box for each invokation when using id. It tries to reuse it if you use class names instead. Also, could try marking with a rel="myuploadbox", i.e.
<a rel="myuploadbox" class="uploadpage" ...>
Fancybox uses the rel attribute to group related things together, this might keep it from closing the box on your submit. Also, wrap everything you want inside that same fancybox in a div tag with the same rel attribute (I don't know if it would be supported that way by fancybox.. give it a try).
Related
I am trying to use the regular Facebook share button, but instead of giving it a specific link. I wan't the link to be diverse, by this I mean, I wan't the link to change depending on a certain function of which happens inside of a php script.
The only issue is the fact, that I can't seem to make it work.
Underneath here I have attached my code, along with a short break down of what I have done so far.
First off I have a div with the id "passToJ", inside this div I have a php code of which gets a post value and then uses "echo" to write and show it on my page. This part is working, as the exact value, which needs to be showed, is showed.
Second part is a javascript of which gets the value inside the "passToJ" div. After that it then adds that value to a link, to make a larger link, with an added variable. It then takes this link and implements in the Facebook href link, of which is necessary. This is a little complicated, but it is a bunch of numbers, which according to the Facebook docs page needs to be there and then inside I have added my own real link by the javascript.
The Javascript then adds those links(href and data-href) to the actual Facebook button of which is written below the javascript function. This is where I guess the issue is. In the "data-href" field it has to include the "complLink" variable value and in the regular "href" it has to include the "complLinkDos".
The value is showing on the page, so far so good. But the actual function of getting the link values to the Facebook, isn't working.
An important note, might be the fact that when trying to use the "share" button. It does work, it just isn't using the right link, it is just using the link of the actual page it is on. Which it isn't supposed to.
<div id="passToJ">
<?php
$linkAffId = $_POST['hiddenAffIDH'];
echo htmlspecialchars($linkAffId);
?>
</div>
<script type="text/javascript">
var div = document.getElementById("passToJ");
var linkToSha = div.textContent;
var complLink = "https://example.com/" + linkToSha;
var complLinkDos = "https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%example.com"+"%2F"+linkToSha+"&src=sdkpreparse";
document.getElementById("fbSBut").data-href=complLink;
document.getElementById("fbLinking").href=complLinkDos;
</script>
<div class="fb-share-button" id="fbSBut" data-href="" data-layout="button" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" id="fbLinking" target="_blank" href="">Share</a></div>
I have this HTML:
Track Your Package »
Somebody on this site was able to provide me with a script to prefix the URL with the domain http://www.example.com/ Here's the script:
$(document).ready(function(){
$('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick', $('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick').replace("window.open('", "window.open('http://www.example.com/"));
});
However, I am having a little trouble with this:
The first issue is where there is multiple instances of the element. Here's a fiddle: http://jsfiddle.net/VMmZx/
Instead of one anchor being signed with ID=4 and the other with ID=5 as intended, they're both being signed with ID=4.
The idea is, each window.open function should be prefixed with http://www.example.com however, the remainder of the URL should remain intact...
The second problem I'm encountering is when the element does not exist on a page, the remainder of the jQuery fails...
Here's another fiddle: http://jsfiddle.net/VPf32/
The <a> should get the class foo, but since the element does not exist on the page, the jQuery does not execute.
Since the JavaScript is being included in the HTML template of the ASP.NET server, this can create many problems.
I hope I've been clear and you can help me. Thanks.
You can use .each() to iterate over each matching element and change them individually:
$('a[onclick^="window.open(\'TrackPackage.asp"]').each(function(index, element) {
element = $(element);
element.attr('onclick', element.attr('onclick').replace(/open\('/, 'open(\'http://www.example.com/'));
});
However, I don't think using links with a href of # and an onclick opening a window is as semantic as it could be. If possible, try changing the markup to this:
Track Your Package »
Now if someone is curious where it will lead them, the browser can show something useful in the status bar when you hover over it.
If you need to adjust the behavior further, add a class and bind for the click event. When they click, prevent the default action and open the window yourself, as you did before.
Why are you doing the click even inline like that? I would just output the links like:
Link Text
And then:
$('a[target=_blank]').click(function(){
var prefix = 'http://domain.com';
window.open(prefix + $(this).attr('href'));
});
I perform a function which loads content into a div. I am using innerHTML, I GET a php file, which updates the innerHTML of the div with the php file's content.
This div contains another div inside it with the class and id of "tweet". This div is updated with actual tweets of a specific hashtag, passed to the function through a $variable
It works fine when it is simply an onclick event, such as this:
<p>activity</p>
<div class="tweet" id="tweet"></div>
However, what I want to do is have it automatically load tweet('') once the "tweet" div has loaded.
The tweet(hashtag) function is:
function tweet(hashtag) { $("#tweet").load('tweet.php?hashtag='+hashtag); }
which loads a php file that calls the jquery tweet function.
jQuery(function($){
$(".tweet").tweet({
avatar_size: 32,
count: 3,
query: "<?echo $hashtag;?>",
loading_text: "loading tweets...",
refresh_interval: 3
});
});
Based on the hashtag passed, it shows 3 tweets.
The hashtag is called when the page is loaded, as a session variable.
It all works fine when I click the link. What do I need to do to have this load automatically. so that I don't need to click the link? I have tried a number of autorefresh options but couldn't quite get it. I would really appreciate assistance.
I know that, if this was just a regular page being loaded, I can simply use $(document).ready and call the jquery function. However, due to the way the div is populated with the new php file contents, it doesn't work. I have tried a few times using autorefresh intervals, window onload, etc. They don't seem to work either.
There are two ways to try this:
Run the code somehow from the function which you call to load the div. (Guaranteed to work. You may even put together some kind of plugin concept. "eval" may be useful.)
Add a tag after the div. If things work as you hope, that code will execute immediately.
i need a code in Jquery for hide all images on all pages except the 'reCaptcha' thing.
The images of reCaptcha start with the link: 'google.com/recaptcha' or 'recaptcha.net' ...
My idea is to make the script that hide all images but not touch the images that contains the part 'recaptcha'.
Is possible to make in Jquery?
Thanks in advance and to all.
Kind Regards.
Luca.
Something like this?
$('img:not([src*=recaptcha])').hide();
First run $("img").hide(); then simply put an ID on the captcha tag and run $("#ID").show();
Or if you can't use an ID tag, cycle through all images in a loop and check what's in the src attribute, or even use a regex selector.
The ReCaptcha script puts all of its generated markup within a <div id="recaptcha_widget_div">
Having said that, you can grab all images except those within this DIV like this...
$("img:not(#recaptcha_widget_div img)").hide();
Or if that is too ugly, you can hide all images and re-show the ReCaptcha ones like this...
$("img").hide();
$("#recaptcha_widget_div img").show();
i have some trouble to connect an link inside an dijit.dialog.
Iam calling an "other" html file inside the Dialog (dialog.href="xxx.html") inside this file iam trying to connect some links by id, to fire an alert box. But nothing happens ? Possible that this isnt possible ??
Thats the part from my xxx.html file..
<script type="text/javascript">
dojo.addOnLoad(function( ) {
dojo.connect(dojo.byId('testLink'), 'onClick', alert('xx'));
}); </script>
TEST
Dialog is extended from ContentPane so it supports all the same parameters (href, etc.). With that said, when a page is included via the href property any <script> tags are not evaluated they are just added to the DOM. This leaves you with two choices:
refactor xxx.html, so the script can be run by the dialog's onLoad handler
embed the event handlers into the html tags; i.e. <input type="button" onClick="alert('xx');" />
Another option would be to use dojox.layout.ContentPane. It'll parse <script> tags. It's in dojox though so it's liable to change in future version. And another downside is that this would require creating your own Dialog class that's a subclass of dojox.layout.ContentPane.
There's also an article on dojocampus about executing javascript in content panes which talks a little bit about using dojox.layout.ContentPane to roll your own Dialog widgets.