I got videos list using AJAX, and me want to play a top video an a light box? So after viewing list how it is possible to play video automatically?
html code
<a id="a_lnk" href="http:\\www.cnn.com">cnn</a>
javascript code
// find a <a> element with id a_lnk
var lnk = document.getElementById('a_lnk');
lnk.onclick = function(e){
// do the magic here..
// e.target is the object that got the click
window.location = e.target.getAttribute('href');
return false;
}
complete example here
http://jsfiddle.net/eAFWY/26/
can also be done with jQuery if that is your thing
http://api.jquery.com/click/
Related
My question may sound confusing but actually it's not. Let me clear you the things. The scenario is I've following HTML code:
/*This is the hyperlink I've given for example here. Many such hyperlinks may present on a webpage representing different question ids' */
<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21679" title="Fixed" href="#fixedPopContent" class="fixed" data-q_id="21679" id="fix_21679">Fixed</a>
/*Following is the HTML code for jQuery Colorbox pop-up. This code has kept hidden initially.*/
<div class="hidden">
<div id="fixedPopContent" class="c-popup">
<h2 class="c-popup-header">Question Issue Fix</h2>
<div class="c-content">
<h3>Is question reported issue fixed?</h3>
Yes
No
</div>
</div>
</div>
Now upon clicking on this hyperlink I'm showing a pop-up(I've used jQUery Colorbox pop-up here. It's ok even if you are not familiar with this library.) On this pop-up there are two buttons Yes and No. Actually these are not buttons, these are hyperlinks but showing as a buttons using CSS. Now my issue is when user clicks on hyperlink 'Yes' the page is redirecting to the href attribute value and the page reloads.
Actually I want to get to the page mentioned in href attribute but the page should not get reload or refresh. How to achieve this? Following is the jQuery code for colorbox pop-up as well as for Yes and No buttons present on this pop-up. I've tried this much but it didn't work for me. The page is getting redirected and reloaded.
My code is as follows:
$(document).ready(function() {
$(".fixed").click(function(e) {
var action_url1 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$('#fixedPop_url').attr('href', action_url1);
$(".fixed").colorbox({inline:true, width:666});
$("#fixedPop_url").click(function(event) {
event.preventDefault();
$("#fix_"+qid).hide();
$("#notfix_"+qid).show();
});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});
});
So you need to load the page at the url but not navigate to it.
You can use .load() .
So in your case, lets say that your pop container div class is .popup, and the div where you want to load the urls content has an id say #container.
$(".popup a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('delhref');
$("#container").load(url);
});
Few things to keep in mind,
This will mostly not work for urls pointing to any other domain. (Same Origin Policy)
Any content loaded with this function (.load()) shall be inserted within the container and all the incomming scripts if any shall be executed.
You can do that with history.js. Here is an example;
HTML:
Delete
Update
<div id="content"></div>
JS:
var History = window.History;
if (!History.enabled) {
return false;
}
History.Adapter.bind(window, 'statechange', function() {
var State = History.getState();
$('#content').load(State.url);
});
$('body').on('click', 'a', function(e) {
var urlPath = $(this).attr('href');
var Title = $(this).text();
History.pushState(null, Title, urlPath);
return false;
});
You can see code here: jsfiddle code
You can see demo here: jsfiddle demo
Note: Urls in example cannot be found. You need to update it according to your needs. This simply, loads content in href without refreshing your page.
When I uploads a image into the page using Add Media, I am setting url for that image, so that when user clicks on that image he should get redirect to another page. problem is, is get loading on same page.
I want it should get load in to another tab. I can't edit each href with target="_blank" as i have lots of images.
I just want to know is there any particular php file that should I edit or any other way is there.
Please help me to solve this problem
<script>
$(function(){ $("a img").attr("target","_blank"); });
</script>
Add this in <head>.
It's easy to set target="_blank" for images:
Click an image to activate its settings pop-up window.
Click the Advanced Settings tab.
Scroll down to "Target" and you'll see the "open in a new window" checkbox there.
For old images, you'll have to make the change manually.
Hope this helps!
You could use JavaScript window.open(), like:
function imgWin(win, winName, imgArray){
var dot, hsh;
for(var i=0,l=imgArray.length; i<l; i++){
(function(i){
dot = imgArray[i].lastIndexOf('.');
hsh = imgArray[i].slice(0, dot);
imgArray[i].onclick = function(){
open(win+'#'+hsh, winName, 'resizable=1');
}
})(i);
}
}
Then you could even get your images easily, like:
var imgs = document.getElementsByTagName('img');
imgWin('imgwin.php', 'My Images, imgs);
Note, that window is implicit, so you dont actually need to writewindow.open().open()` will work fine, in this case.
I need to launch jQuery Overlay in two (call them three) situations:
From HTML button (using rel attr.)
When called from PHP
(2a) (to remain opened) after $_POST submit.
For (1) and (2) I tried this:
//my js func
function triggerOverlay(elem){
if(!elem){
elem = "button[rel]";
load = false;
}else{
load = true;
}
$(elem).overlay({
top : 'center',
closeOnClick: false ,
load : load ,
speed : 0,
});
};
//call from html file
<script type="text/javascript">
$(document).ready(function() {
<?php
//I'm calling Launch::init(); from where I need to launch it, and it sets self::$open_overlay = TRUE;
if(Launch::$open_overlay){
echo 'var elem = "#orderOverlay";'."\r\n";
}
?>
if(!elem){
var elem = false;
}
triggerOverlay(elem);
});
</script>
The problem with this one is that var elem will prevent using button after I call PHP Launch::init(). So, I need another approach, which will let me use both manual and automated launch of jQuery Overlay.
Then, I will take care of step (3)-> I will send same command as on (2) when I reload the page, after submitting form.
Assuming you are using jQuery tools plugin for overlay there are examples and docs for managing an overlay programmatically. Look at Scripting API on docs page and demo for Opening overlays programmatically
You can open an overlay within a form submit handler, or element click handler using :
$(selector).overlay().load();
Reference : http://jquerytools.org/documentation/overlay/index.html
If you are not using jQuery tools look at API for plugin you are using
I am trying to figure out how to smoothly navigate between divs using jquery. I have a php website with 4 navigation divs. So when I click "staff" on the page I navigate to that div. How would I do this using jquery ?
This is how I´m using this:
<div id="top_links">
<p class="top_link">The Firm</p>
</div>
i´m trying to make it look like this website: http://themetrust.com/demos/solo/#services
I´m new to jquery. I cant see how I should do this so any suggestion would be a HUGE help.. Thanks :D
You can animate the scrollTop property with jQuery:
$('a').on('click', function (event) {
//stop the browser from jumping to the anchor
event.preventDefault();
//get the href for this link and the offset from the top of the page for the target of that href
var href = $(this).attr('href'),
oset = $(href).offset().top;
//animate the scroll to the selected element
$('html, body').stop().animate({
scrollTop : oset
}, 1000, function () {
//after the animation is complete, update the hash in the address bar so that the state is saved (if the user refreshed the page they can be brought back to this place, but that takes a bit more code)
location.hash = href;
});
});
Here is a demo: http://jsfiddle.net/Hpegt/1/
This requires that your links are targeting elements on the page using the syntax: #element-id.
Note that .on() is new in jQuery 1.7 and is the same in this case as .bind().
UPDATE
One cool thing that you can do with this is add a custom easing method. If you use the jQuery Easing Plugin ( http://gsgd.co.uk/sandbox/jquery/easing/ ) then you can choose from lots of types of easing. I like easeInOutExpo for animating page scrolling.
You can use the scrollTo plugin: http://demos.flesler.com/jquery/scrollTo/
The example page is using jQuery.ScrollTo
Looks like they're using these libraries:
jQuery.scrollTo
easySlider
visualNav
You'll want to use jQuery's animate() function to adjust the window.scrollTop property to align with the appropriate div.
I am developing a web-page in PHP that needs following functionality:
1. When User click on "Say Thanks" it should be changed with "Done!".
2. At the same time I want to call an action in indexController.
3. At this time I want to show "loading...."
4. The current page has a lot of dynamic contents that should also not change.
Please suggest me what should I do to complete above tasks......
I figure you need an AJAX call. I usually do that for loading comments and such when you press "more". In my case, there's an empty div and an <a> tag with the link to the comments view (with a separate action, ofc). Then I use jQuery for the AJAX magic:
$(function() {
$("a.CommentsListBtn").click(function() {
var tmpHref = $(this).attr("href");
var tmpLayer = $(this).parent().children("div.CommentsList");
tmpLayer.load(tmpHref, function() {
tmpLayer.stop().slideDown("medium");
});
return false;
});
});
I hope this helps.
Learn to use JQuery, JQuery UI. It isn't that hard! What I think you need to learn is the following for your problem:
.click()
.html()
jQuery.get()