I have a html button. Code is given bellow,
<div id="apDiv1">
<input name="wpost" type="button" value="Publish" onClick="wall_publish()"/>
</div>
When a user click 'Publish' button it calls 'wall_publish()' script function which is in the same page.Code of the 'wall_publish()' function is given bellow,
<script>
function wall_publish(){
//some codes...
}
</script>
I need to display a loading gif image near my 'Publish' button until Script function is finished.
Can anyone please tell me how to do this?
you should show the picture do the job then remooove it again just that simple
function show pic();
function do job();
function remove pic();
If you have no idea about how to show a picture i think you should go check java-script doc's
if you try to make the pic invisible i can suggest you use the jquery library and just addthe line
$('#img').hide(); to hide it and $('#img').show(); to show it ;
this is not very specific but you sshould go throu that
i think you HTML code but not sure
<img src="the adress of the image" id="gif" />
The best way to show/remove any html is by making use of the display property.
Create a hidden image.
function wall_publish(){
document.getElementById('loading').style.display='inline'; /* display it */
// do what you need here
document.getElementById('loading').style.display='hidden'; /* put it away again */
}
There are, of course, a dozen way to do this. I picked the most straight-forward easy approach that I used to use when I first started to learn javascript.
Related
I've set up a small script to show and hide a div..
$('.message-head').click(function () {
$('.message-preview').toggle('slow');
});
Works perfectly as it should do. My problem is that I have multiple instances of the html markup on the page, which is inside a foreach loop..
<div class="two-three-col message-head">
<h4>#message.Subject</h4>
<div class="message-preview">
#Html.Raw(#message.Body)
</div>
</div>
This is basically for a messaging system that has been chopped and changed a lot and has been left to me to fix; not being the best at javascript I'm quite stuck. So how can I modify the js so that if I click on say message 1 then only message 1 will show/hide on click and the rest will stay inactive.
Thanks in advance
You can use the this keyword to refer to the element which raised the event. From there you can traverse the DOM to find the related .message-preview element. Try this:
$('.message-head').click(function () {
$(this).find('.message-preview').toggle('slow');
});
I'm using an image slider on my site: http://arirang.hr/cocohouse/accommodation/CHfood_en.html . It works well for me.
When visitor click a thumbnail below the slider it jumps to the particular image. It's done by having a click function for the each thumbnail. Started with few thumbnails only. Having quite a lot now. Ended up with a long list of click functions there.
Guess that a proper way should be by some kind of loop there. When visitor clicks any thumbnail to start the loop that finds which one is clicked and call the cycle with the clicked number.
Change all your images to use a class instead of ids like:
<input type="image" class="goTo" src="../images/cocohouse/accommodation/thumbnails/tn_CHfood_29.png" width="80" height="60">
Then, do this:
$('.goTo').click(function( event ) {
event.preventDefault(); // you dont need this line for your code, see comment below for explanation
var cur = $('.goTo').index( $(this) );
$('#acc_sl').cycle(cur);
});
first off u should present some sort of effort of what you have done so far. This is not a site where you can order solutions.
To fix your problem you should have one function that takes image name or some sort of identifier as an argument. That way you only use one function for every picture.
Well I thought of this one and I have no ideas how it can be made... I thought to search up for help over here. I am just html/css newbie programmer and I dont know to make javascripts or scripts with jquery help ...
Anyway... This is my explanation.
Lets say I have an download button.
<a onclick="run"><div id="download-button"></div></a>
There will be rest in css for normal and active state... Lets skip it here.
Now what I need is javascript I guess?
I want that onclick "run" to trigger that script where I can copy/paste a couple of links for download...
Lets say I have 5 links that redirects to eg.(rapidshare)...
I wanna paste this five links in that javascript, so download button randomly pick one link. Example... Downloading link no 4.
So if I keep clicking on it it will randomly redirect to one link... 1,2,3,4,5 doesnt matter :) (if possible, it wont repeat same link again). If not possible, repeating same link is fine.
Is this even possible? I guess some math count things in javascript or something :D I dont know how javascript works so I cannot make, really.
I also know that this site is not "Come, ask question and get everything done"... But please, if you just can help me with this javascript trouble? I dont even know to write anything except <script type="text/javascript"></script>
Thanks in advance!
Put all your links inside an Array (assume myArray), then you can call:
var randomItem = myArray[Math.floor(Math.random()*myArray.length)];
To select a random item from that array.
Reference + details
Here you have a jquery solution:
HTML:
<div id="button">
link
<a class="button-link" href="http://www.google.com">a</a>
<a class="button-link" href="http://www.yahoo.com">b</a>
<a class="button-link" href="http://www.bing.com">c</a>
</div>
CSS:
#button {
background: red;
}
#button a.button-link {
display: none;
}
Javascript:
$(function() {
$("#button").click(function () {
var $anchors = $(this).find("a.button-link");
var $anchor = $($anchors[Math.floor(Math.random()*$anchors.length)]);
window.open($anchor.attr("href"),'_blank');
});
});
And last, but not least, working demo.
I am running a bg slider..."Supersized - Fullscreen Slideshow jQuery Plugin"
what i need is when a background changes some contents in a specific div must also change...
here i found a code line from script
if (options.slide_captions)
$('#slidecaption').html(options.slides[currentSlide].title);
this one pulls the image title to a specific div, but i want to load unique div for each background change...
or is there any other ways to do??
i have very little knowledge in jquery...
please help
advance thanks...
you can write this:
if (options.slide_captions) $('#slidecaption').html(options.slides[currentSlide].title, function(){
//write the code that load the unique div
});
tell me if it works
http://buildinternet.com/project/supersized/docs.html#theme-after
Check-out the theme.afterAnimation( ) documentation. You can set it to a function that changes the content after the slide changes.
I was making a small thing in HTML and basically I have some "frames" like
<div id="frame_1">
...
</div>
<div id="frame_2">
...
</div>
...
Basically what I want is for only one frame to be visible at one time and to navigate between frames easily with previous and next buttons (navigation by frame number a plus, but not required)
Before I set out to write it myself I figured someone had already done it so has it been done?
You may want to check this out: http://meyerweb.com/eric/tools/s5/ :)