I'm starting to learn Ajax for a project but I got some problems... This is my situation so far:
1- I have a navbar with different buttons to show content.
2- I have a div container where goes the selected content.
3- When clicked the desired content it never ends loading.
$(function(){
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img width='50px' src='https://berkeleyloop.ridecell.com/static/common/images/loading-circle.gif'/>";
var loadUrl1 = "http://fullhdpictures.com/wp-content/uploads/2015/04/Beautiful-Pagani-Zonda-Wallpapers.jpg";
$("#load1").click(function(){
$("#result").html(ajax_load).load(loadUrl1);
});
var loadUrl2 = "http://fullhdpictures.com/wp-content/uploads/2015/04/Most-Beautiful-Pagani-Zonda-Wallpapers.jpg";
$("#load2").click(function(){
$("#result").html(ajax_load).load(loadUrl2);
});
});
#navbar {
position: fixed;
left: 0;
top: 0;
width: 48px;
height: 100%;
background: #181818;
overflow: hidden;
}
#result {
position: relative;
left: 50px;
width: calc(100% - 48px);
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<button id="load1">1</button>
<button id="load2">2</button>
</div>
<div id="result"></div>
What did I missed? Please help me to achieve the desired effect!
you can't load content from different web site by using load. to do that you has to be rights. if you check your console you will see this
"No 'Access-Control-Allow-Origin'"
edit:
i think this will help
codepen.io/airsakarya/pen/zqLVZo?editors=1010
Related
I have a website which has a page layout and style something like mentioned in this JsFiddle
Now Using JQuery when I click on the button, content is being displayed properly as shown below:
But when I first scroll the page and then click the button, content is not displaying properly as shown:
Can you please guide me to handle this situation ?
I have used below jQuery for this. But it seems offset or position is not working
$('#btn').click(function(){
var t = $(this).offset();
console.log(t);
$('.control-container').css('top', t.top + 20 + 'px');
$('.control-container').css('display', 'block');
});
$(document).on('scroll', function(){
$('.control-container').css('display', 'none');
});
You don't need to use offset to achieve that... And if you need to keep CSS with position:fixed, you need to switch it in javascript to static.
The thing you are looking for is simply display:table ...
$('#btn').click(function(){
$('.control-container').css({'display': 'table','position': 'static'});
});
$(document).on('scroll', function(){
$('.control-container').css({'display': 'none','position': 'fixed'});
});
Check out this JSFiddle
But if you really need a solution with position:fixed based on button position, you should try this way:
$('#btn').click(function(){
var button_fixed_position = $('#btn').get(0).getBoundingClientRect();
$('.control-container').css({'display': 'block','left' : button_fixed_position.left, 'top' : button_fixed_position.bottom});
});
$(document).on('scroll', function(){
$('.control-container').css({'display': 'none'});
});
Check out second JSFiddle
There is no need to specifically mention position property here.
Also remove the closing a tag and replace it with </button>
Currently container is occupying full width ,but that can also be set
$('#btn').click(function() {
var t = $(this).offset();
console.log(t);
$('.control-container').css('top', t.top + 30 + 'px');
$('.control-container').css('display', 'block');
});
$(document).on('scroll', function() {
$('.control-container').css('display', 'none');
});
.header {
background-color: maroon;
color: #fafafa;
height: 60px;
position: fixed;
width: 100%;
text-align: center;
line-height: 19px;
font-size: 25px;
z-index: 2;
padding: 0px;
margin: 0px;
top: 0;
}
.content {
background-color: #fff;
border: 1px solid #999;
padding: 5px;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
top: 60px;
}
.control-container {
width: auto;
background-color: red;
#position: fixed;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
Header
</div>
<div style="clear:both">
</div>
<div class="content">
<br/>
<br/>
<br/>
<br/>
<br/>
<button id="btn">Click Me</button>
<div class="control-container" style="display:none;">
Keep me exactly underneath 'Click Me' when Page is scrolled.
</div>
</div>
</div>
CSS position fixed property positions an element referencing view's/body's dimension.
If you have access of modifying CSS, then just remove the position: fixed; property from .control-container.
If you don't have access, then using script add position: static !important property to .control-container.
$('.control-container').css('cssText', 'position: static !important');
Modified JSFiddle
// JavaScript Document
$('.page').hide();
$(".btns").click(function(e){
e.preventDefault(); //this method stops the default action of an element from happening.
var $me = $(this); //$(this) references .btns, the object in local scope.
var $myContent = $($me.attr('href')); //pulls href of page 01, 02, or 03.
$('.page').hide(); //hides all pages
$myContent.fadeIn();//fades in clicked href connected to btn
$(".btns").removeClass('selected');//
$me.addClass('selected');
});
*{
border-spacing: 0px;
}
body{
margin: 0px;
padding: 0px;
}
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em;
/*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
border: dashed 1px;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
position: absolute;
top: 50%; left: 50%;
width: 4em; height: 4em;
margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em); }
<div class="body_content">
<div class="page" id="page_01">
<h2>1. Category 1</h2>
</div>
</div>
<div class="circle-container">
<nav class="navigation">
<a href="#page_01" class="btns deg0" >
<img id="one" src="imgs/button.png" alt="page01"/>
</a>
</nav>
</div>
I have a unique situation that I would like to discuss with you all. I am trying to create a web page that has a circular navigation, as shown here enter image description here
Each one of these buttons would display content when clicked, like an in-page link. The JQuery is as shown enter image description here
The concept seems simple enough, force all content to hide, when a user clicks a button, the page content linked to that button shows. It works when the links are inline or block display, but when in a circle, the links don't work, the button content doesn't show. Has anyone worked with a similar issue? Or would anyone have a potential solution? I apologize for the vagueness of the questions but the issue seems multi-faceted. Any advice or ideas would be greatly appreciated.
Are you sure your jQuery reference is working? I don't see any issue with the code, the click event should fire when you click on the links. Check the console for any errors, I strongly believe jQuery might not get loaded.
Situation:
I am looking for a jquery/ajax loader and found this thread helpful.
Now I am using this fiddle as my loader.
Everything works fine but I only have one concern.
Below the js code, 'responseTime' is fixed to 2.5 secs.
$.mockjax({ url: "/mockjax", responseTime: 2500 });
So if my page loads more than 5 secs, the loader only runs at 2.5 secs.
Question:
How am I going to depend the loader's time to my page's unpredictable loading time?
Your help is very much appreciated. Thanks!
You can show loader gif until window loads completely by
$(window).load(function(){
}
And do it like:
$(window).load(function(){
$('#cover').fadeOut(1000);
});
#cover {
background: url("http://www.aveva.com/Images/ajax-loader.gif") no-repeat scroll center center #FFF;
position: absolute;
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cover"></div>
<img src="https://i.ytimg.com/vi/lklDJ5VRQao/maxresdefault.jpg" />
It will start with showing gif and will be faded out once content gets loaded completely.
I found what I'm looking for from this site.
Below is the code I use.
$(document).ready(function(){
$("#spinner").bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxStop", function() {
$(this).hide();
}).bind("ajaxError", function() {
$(this).hide();
});
$('#button-upload').click(function() {
$('#spinner').show();
});
});
.spinner {
position: fixed;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
text-align:center;
z-index:1234;
overflow: auto;
width: 100px;
height: 102px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="spinner" class="spinner" style="display:none;">
<img id="img-spinner" src="http://sampsonresume.com/labs/pIkfp.gif" alt="Loading"/>
</div>
<input type = "submit" value = "Upload" id="button-upload" />
The loader is indefinite in this snippet, but it runs perfectly on my site.
Thanks guys for the help anyway =)
is there a way to download images inside an HTML page before showing the page? Because I got an issue where the div underneath doesn't show up correctly. I am pretty sure that it is due to the image loading after the page was shown. I have no issue locally, but once I deploy it with Heroku, I have a visual error like so:
The local version:
Would anyone have an idea on how to download them before showing the rest of the page? I tried to use the following JavaScript but it didn't work:
preload([
'./webapp/dist/images/chantier1.jpg',
'./webapp/dist/images/chantier2.jpg',
'./webapp/dist/images/chantier3.jpg'
]);
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
Thank you for your help and time
a fast way to do it, by the way i think it's really strange that an image load delay can create this kind of view problem:
$(window).load(function() {
$('.loader').fadeOut(1000);
});
img{
width: 100%
}
.loader{
position: fixed;
height: 100vh;
width: 100%;
background-color: white;
top: 0px;
left: 0px;
}
p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://images.unsplash.com/39/wdXqHcTwSTmLuKOGz92L_Landscape.jpg">
<img src="https://static.pexels.com/photos/1029/landscape-mountains-nature-clouds.jpg">
<div class="loader">
<p> loading </p>
</div>
Please try to set the height of the images container and the width and height on img tags.
I have an Angular application that has multiple accordion groups. They are closed by default. One section is quite large so when it opens, the users need to scroll down if they want to see the end of the section. This section has some calculations on it. The problem is that I have a calculate button on the top of the section so when the user wants to recalculate it they have to scroll to the top again to see the button.
Is there any possibility to get the location when the user reached a certain location so it would trigger a ng-if with an overlay button.
Thanks,
Brent
You can use the JQuery .scroll(), it might look like this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $document) {
$scope.pos = {
scrollPos:0
};
$("#outer").scroll(function() {
$scope.pos.scrollPos = $("#outer").scrollTop().valueOf();
$scope.$apply();
});
});
#outer {
overflow: auto;
height: 250px;
width: 200px;
border: solid 1px #ccc;
}
.inner {
height: 1000px;
position: relative;
width: 198px;
}
.top {
position: absolute;
top: 0px;
}
.bottom {
position: absolute;
bottom: 0px;
}
.scrolled {
position: fixed;
top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{pos.scrollPos}}<br>
<div id="outer">
<div class="inner">
<div class="scrolled ng-hide" ng-show="pos.scrollPos > 50">Passed Point.</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
</div>
</div>
</div>
Yes this can be achieved with javascript try reading through this article on Mozilla it will help you achieve your goal, basically it lets you know the position of the mouse on the client. Apart from this if there is a specific element on the page that you need to know if the cursor is inside you can use Jquery and mouseenter event and then trigger some action.