I'm using slider and having it open up on a specific image when the page loads. That happens just fine, only when I go to select another image it stays visible as the other one also pops up.
Here is my current code for forcing it to appear.
<script>
$(document).ready(function(){
$("#793").show();
});
</script>
the page can be seen here, select another image at the bottom and you'll see what I mean.
http://www.shehitpausestudios.com/index.php/shop/polaroids/girls-and-dreams/last-summer/
maybe try something like this
$(".bjqs li div").click(function(){
$(".person_about").hide();
var image = $(this).attr("data-rel");
var div = image.replace('#','');
$(".person_about #"+div).show();
return false;
});
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 have recently started coding in PHP and im wondering how i can show a div defined in the adress bar (example: www.yourwebsite.com/index.php?divtoshow=home)
The div is hidden with css, display:none;
then i want it to display the home div
i have tried using jquery, but i cant seem to get the variable to be implamented into the script
I already have the following for when i click the home icon:
$(".chome").click(function(){
$("#home").show(500);
});
First, get the name from the query string:
<?php $divtoshow = $_GET["divtoshow"]; ?>
Second, add some JQuery to display the div on page load:
<script>
$(document).ready(function() {
$("div[id=<?php echo $divtoshow; ?>]").show();
});
</script>
in some pages i see when you arrive at the end of the page the page automatic loads new data. For example, some blogs when you get to the end of the page (that only loads 10 articles when you get there), the page load 10 articles more without pressing anything, so the questions will be, How do i execute/triger a php/javascript commands when something is displaying or the user gets to a particular position of the page? (USING A LOADER IMAGE OF COURSE)
--edit--
IMPORTANT: Please i dont need a triger by scroll, i need to triger from a display object, like when some image is in focus. Thanks!
Here is some code that runs on .scroll() and calculates how far from the bottom the current scroll is ..
http://jsfiddle.net/hRSE8/ (in this example, i add manually some text to showcase the effect of adding content and the scroll system adjusting to it)
At a specified distance you can load content with .ajax()
in short
$(window).scroll(function(){
var $this = $(this);
var $body = $('body');
var distance = $body.outerHeight() - $this.height() - $this.scrollTop() );
});
Update
Here is an updated example that will show when an element is in view (additional update to match specs in comment)
Demo
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var $window = $(window);
var visibleTop = $window.scrollTop();
var visibleBottom = visibleTop + $window.height();
var elementTop = $('#myloader').offset().top;
if ( elementTop > visibleTop && elementTop < visibleBottom)
{
// loader in view
// so we remove the loader from the DOM
$('#myloader').remove();
// and run the code ..
$('#tweetsFeed').jTweetsAnywhere(
{ searchParams: ['ors=patanemo+bocaina+cuyagua+todasana+parguito+%23surfVE&lang=es&geocode=8,-66,1000km'],
count: 6 });
}
});
});
</script>
And you need to put in your page the loader with <img src="loader.gif" id="myloader" />
If you're using the jQuery framework, have a look at infinite scroll:
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
I have never had to do this before but how I would do it is like this:
I would calculate the scroll position of the page using:
$(window).scrollTop();
Then I would find the scroll position an element on the page:
$(element selector).scrollTop()
Once the first number is bigger than the second number (plus maybe a buffer) then go ahead and make your ajax call to load whatever content you want.
This is all theoretical as I have never done but it seems logical. Anyone feel free to correct me where I might be wrong.
EDIT: You could also use the answer from this post:
Check if element is visible after scrolling
to see if an element is visible on the screen and then load at that time.
Though either of these solutions would require you to add an event handler for the scroll event.
I use 4 link (submenu button) on my site. Every link open a DIV tag.
This DIV tags default stat is hide. (with jquery)
$('div[class*="my_"]').hide();
After i click a submenu then i show() the div tag i need:
$('a#submenu_1').click( function() {
$('div[class*="my_"]').hide(); // hide all DIV if some of them opened before
$('div.my_submenu_1').toggle('slow');
});
This is work well, till i patient to wait to hide if other DIV is opened before. But if im a click too fast between sub-menus then sometimes jquery can't HIDE the div tag before SHOWn the new.
My i use some dealy .. wait?
Could you suggest me something?!
I agree with #Ghommey, but you may also want to do the show as part of the callback to hide() so that you know that all of the others are hidden first.
$('div[class^="my_"]').stop().hide(0,function() {
$('div.my_submenu_1').show('slow');
});
Note, that you could probably rewrite this a little more generically.
$('a.menu').click( function() {
var menuID = $(this).attr('href');
$('div.menu').stop().hide(0,function() {
$(menuID).show('slow');
});
return false;
});
where your HTML looks like:
Menu 1
Menu 2
...
<div id="my_menu_1" class="menu">...</div>
<div id="my_menu_2" class="menu">...</div>
This would have the advantage of having the link actually work if javascript were turned off.