Change Window location dynamically by #id - Jquery/Javascript - javascript

I have url like this -
http://test.com/simple-post#5
Here #5 will change dynamically.
My html divs are many like
<div id=1> Div 1 </div>
<div id=2> Div 2 </div>
....
<div id=5> This </div>
So, when page loads windows location will go that div by id. How can I do that using Jquery/Javscript?
I know in jquery I can redirect window location by window.location
$(document).ready(function () {
window.location = "#";
});
Please tell me if there is other efficient way to do this.

It should go actually with your current code without any script.
If that is not working and you want to do it with script, you can do
$(document).ready(function () {
var afterhash = location.hash.substr(1);
$('html, body').animate({scrollTop:$('#'+afterhash).position().top}, 'slow');
});

Related

How can I show only one div id from an external html file inside a popup modal?

I have some content on an external html file that I am displaying in a popup modal using jQuery Modal. I am able to display the whole page fine, but I would like to only show one div at a time depending on which link is clicked.
The content on the external page looks like this:
<div class="review" id="one">This is review #1</div>
<div class="review" id="two">This is review #2</div>
<div class="review" id="three">This is review #3</div>
The links on the main page are coded like:
<a class="link" href="external.html" data-target="#two" rel="modal:open">Read review</a>
Then I have some Javascript that I thought would allow it to only show the selected div id depending on which link is clicked:
$(document).ready(function() {
$('.link').on('click', function() {
var target = $(this).data('target');
$('.review').not(target).hide();
$(target).show();
});
});
This shows all the content from the external html and not just one selected div.
Is there a way to show only one div id from an external html loaded into a modal?
Update:
I have attempted to implement Bhojendra's solution below, but am now getting the error:
"TypeError: null is not an object (evaluating 'this.$blocker.fadeOut')"
The link to view the code:
https://drive.google.com/open?id=1n61Buty8oexE369jdxCi4lZ9M9wj2SaP
From the documentation example that you linked, you can do like:
$('.link').click(function(event) {
event.preventDefault();
target = $(this).data('target');
$.get(this.href, function(html) {
$(html).find(target).appendTo('body').modal();
});
});
A better to have modal content wrapper in your body:
<div id="modal-content"></div>
Now, in jQuery, use this:
$('#modal-content').html($(content).find(target)).modal()
// html parameter renamed ^^ to content
I meant to use:
$('.link').click(function(event) {
event.preventDefault();
target = $(this).data('target');
$.get(this.href, function(content) {
$('#modal-content').html($(content).find(target)).modal()
});
});

jquery or vanilla javascript auto load(jquery load) all link content in page

I saw the options for downloading links, but did not find there the automatic download of all links.
I need automatic loading, it's not important to use jquery load or ajax or http request or loadPageSection. Any option is fine.
First I came up with the simplest version with the click emulation, on each link.
$(function() {
document.querySelector('.className').click();
});
$("a").click(function() {
$("#pageLoad").load($(this).attr("href"));
return false;
});
However, it worked as a redirect, redirecting to the first page.
Next, I replaced the click on each (function(), everything works although until now only the first page is loaded
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function () {
$('a').each(function() {
$(".pageLoad").load($(this).attr('href') );
});
});
</script>
<table align="center">
<tr><td>
first
<div class="pageLoad"></div></td><td>
second
<div class="pageLoad"></div></td><td>
third
<div class="pageLoad"></div></td></tr>
</table>
It is necessary that all pages are loaded. under each <a href
Ideally, there should not be a <div class = "pageLoad"> and everything should be added automatically generating a div and perhaps added as a child.
And most importantly, jQuery makes it possible to use load ('test.html #target'); to download the required element, how to do it now?
$(". pageLoad").load($ (this #target).attr ('href')); does not work?
How to download the required fragment in this case?
And the last: if there are also links in the loaded page, will there be any problems? Now while all is loaded 1 time there are no problems.
It is necessary to load the contents of links only once for all links on the page.
The solution to these problems is too complex for me.
update:
<script>
$.ajaxSetup({
'beforeSend' : function(xhr) {
xhr.overrideMimeType('text/html; charset=windows-1251');
},
});
$(function () {
$('a').each(function() {
$(this).parent().find(".pageLoad").load($(this).attr('href') + ' #inf-1751');
});
});
</script>
I fixed the display of the encodings.
The last problem is to use the anchors on the elements. If you only add
anchor, then load a copy of the page, if to another page, the anchor also does not work, loading the entire page.
If you want to load each page into each your link related container .pageLoad, then it might look like that.
$('a').each(function() {
$(this).parent().find(".pageLoad").load($(this).attr('href') );
});
If you would like to add .pageLoad on fly
$('a').each(function() {
$(this).after('<div class="pageLoad"/>').load($(this).attr('href'));
});
No need to add .pageLoad manually
<table align="center">
<tr>
<td>
first
</td>
<td>
second
</td>
<td>
third
</td>
</tr>
</table>

Auto refreshing div with javascript

Trying to refresh a div every 60 seconds, using the following javascript:
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load').fadeOut('slow').load('index.html #load').fadeIn("slow");
}, 60000);
</script>
Here is the corresponding div:
<div class = "well" id="load">
<center><h3><i class="icon-bar-chart"></i> Mt.Gox</h3></center>
<center><h3>Ƀ1 = <?php echo $usd; ?> USD</h3></center>
<hr>
<center><h3><i class="icon-bar-chart"></i> BTC-e</h3></center>
<center><h3>Ƀ1 = <?php echo $usde; ?> USD</h3></center>
</div>
The div is currently not refreshing at all.
Thanks for any help!
Ok that's because you are using the script incorrectly., You need to use callbacks as below
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load').fadeOut('slow',$(this).load('index.html #load',
function(){
$(this).fadeIn("slow");
})
)
}, 60000);
</script>
Edit: I misunderstood the code a bit so ignore my original comment below!
Try to remove the #load in the url. It's perfectly valid according to the jQuery API, but I think in this case it can cause reduncancy.
That is, make it like this instead:
$('#load').fadeOut('slow').load('index.html').fadeIn("slow");
When you call .load() on an element it will load into that element, if you also specify the same element in the Url to load - I think it can cause a problem.
Please see this link: Origin null is not allowed by Access-Control-Allow-Origin
Also that issue, I think that you shouldn't load html data via file:/// URL. Why don't you load a div in the same file. Forexample:
$('#load').fadeOut('slow').load($('#test').css('display', 'inline')).fadeIn("slow");
and the div tag is like this:
div id="test" style="display:none;"

Dynamically alter URL

Please how can I change the feed URL in this script with link(href)
<script type="text/javascript">
$(document).ready(function () {
$('#test').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews');
});
</script>
<div id="test"> </div>
See example here http://www.zazar.net/developers/jquery/zrssfeed/example.html
The test Div displays the content of the rss feed
I just want to be able to alter the rssfeed(url) by clicking links with diffrent rssfeed url
<a onclick ="rssfeed('http://feeds.cnn.com/News');"></a>
note sure how you'd want the link to load it, but I'm assuming on click so this is what I would do..
<script type="text/javascript">
$(document).ready(function () {
$('.rss').click(function(){
$('#test').rssfeed($(this).attr('href'));
})
});
</script>
<a class="rss" href="http://feeds.reuters.com/reuters/oddlyEnoughNews">load rss</a>
<div id="test"> </div>
As it is shown here: http://www.zazar.net/developers/jquery/zrssfeed/example_menu.html
One can simply change the feed by calling .rssfeed again.

File Dialog Does Not Show Up

I've been facing this problem for the past couple of days. I have an input of type "file" inside a tooltip. When I click on the button to open the file dialog, nothing shows up. Now I tried to use Valums AJAX Upload and the same thing happens. The problem is there aren't any errors so I do not know how I can debug to find out what the problem is... Here's my code:
<div class="liImageThumb tooltip-trigger">
<div class="tooltip down">
<div class="tooltip-arrow"></div>
<p class="liUploadButton greenButton">Upload</p>
<p class="okButton"></p>
</div>
</div>
<script type="text/javascript" src="#Url.Content("~/Scripts/fileuploader.js")"></script>
<script type="text/javascript">
$(function () {
var greenButton = $('.liUploadButton')[0];
var uploader = new qq.FileUploader({
element: greenButton,
action: '#Url.Action("Upload", "Item")' //outputs the correct DOM node
});
console.log(greenButton);
});
And here's the code that builds up the tooltip:
$('.tooltip-trigger').removeClass('nonjs').live('mouseover', function(){
var $trigger = $(this);
var $tooltip = $('.tooltip',$trigger);
if (!$trigger.data('init')){
$trigger.data('init', true);
if($tooltip.length){
$trigger.hoverIntent({
'over':function(){$tooltip.show();},
'out':function(){$tooltip.hide();},
'timeout':200
});
$trigger.trigger('mouseover');
}
}
});
What do you think is preventing the dialog box from showing up?
Are you using this in ASP.Net MVC project ? I assume, you are, based on the Url.Content syntax.
If yes, your script tags src attribute should look like
src='<%=Url.Content("~/Content/script/MyFile.js")%>'
Refer this answer for details.

Categories