can somebody help me to solve this prob :
I've a page width some div ID (Section of page #1 #2 ...) and a link (NEXT), how i can do to increase this link each time the user click on without refreshing the page ?
sample if link was 1 .. link become 2 etc ..
Any ideas ?
AJAX if you need to pull data from the server again on the click.
Standard JavaScript if you just want to do the number increment locally in the browser without anything fancy.
I would use an ajax for that just to send a request to php script what would generate a whole <a> tag and insert it in html. So onload of the page you set counter on 1 for example and everytime you click the 'next' you trigger onclick event (call a function on this event) increase your counter by 1 and send this value to server where script is generating for you tag or something similar... add it to the html, so you can update your link in html without refreshing the page. On parallel you can delete, hide or show other elements if you need.
I hope that will give you some idea. I would tell you more if i would be able to see your code, so far it is as i see your situation. Sorry if i didn't get it right; )
<html>
<head>
<style>
div {
display: block;
width: 100px;
height: 800px;
background-color: red;
}
a {
font-size: 3em;
position:fixed;
top: 0;
right:0;
}
</style>
</head>
<body>
<div id="section1">one</div>
<div id="section2">two</div>
<div id="section3">three</div>
next
<script>
var i = 1;
function increaseLink() {
i++;
var link = document.getElementById("linkId");
link.innerHTML = "click";
link.setAttribute('href', "#section"+ i);
return false;
}
</script>
</body>
</html>
Is that what you need? You do not need php or ajax to achieve this.
In the browser script: Listen onClick event on links and send AJAX-request to php-script when links is clicked.
In the server script: Update field on database or other storage.
Related
I'm trying to use IE ActiveX control to update Autohotkey GUI dynamically, but encountering weird behavior. Please help.
; ie-refresh.ahk on Autohotkey 1.1.24
global WB
Gui, Font, s9 cBlack, Tahoma
Gui, Add, Text, , % "Click button to see html content."
Gui, Add, ActiveX, xm w120 h30 vWB, Shell.Explorer
Gui, Add, Button, xm gBtnClicked, % "Update html text"
Gui Show
return
BtnClicked()
{
html_tmpl =
( Ltrim Join
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
color: red;
}
</style>
</head>
<body>
Count: {}
</body>
</html>
)
static snum := 0
snum++
html_code := Format(html_tmpl, snum)
WB.Navigate("about:blank")
WB.document.write(html_code)
}
GuiEscape:
GuiClose:
ExitApp
When I click the button, the IE content updates, but it only updates twice.
On third button click, IE content area almost certainly shows as blank.
Keep clicking the button, the red text appears intermittently and randomly, rougly one out of ten clicks.
So what's wrong with my code?
The problem seems to be with calling navigate the second time.
I thought that WB.Stop() would fix the problem but after that you find out that WB.Navigate is not enough to clean the screen so...
The most sensible alternative looks like putting the WB.Navigate after the gui-add (or somewhere after) and then using WB.Refresh() .
Just for refrerence, some WebBrowser Control documentation here.
Although I cannot explain the weird behavior in my question, I have managed to find out a solution to my requirement.
Use code below:
; ie-refresh.ahk on Autohotkey 1.1.24
global WB
Gui, Font, s9 cBlack, Tahoma
Gui, Add, Text, , % "Click button to see html content."
Gui, Add, ActiveX, xm w120 h30 vWB, Shell.Explorer
Gui, Add, Button, xm gBtnClicked, % "Update html text"
WB.Navigate("about:blank")
Gui Show
return
BtnClicked()
{
html_tmpl =
( Ltrim Join
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
color: red;
}
</style>
</head>
<body>
Count: {}
</body>
</html>
)
static snum := 0
snum++
html_code := Format(html_tmpl, snum)
WB.document.open()
WB.document.write(html_code)
WB.document.close()
}
GuiEscape:
GuiClose:
ExitApp
First, call WB.navigate("about:blank") only once.
Second, when I need to update the whole html document, I need to open + write + close.
Now it works reliably.
I want to integrade hubspot chat interface in my Rails 4 + Turbolinks application. I have configured Google Tag Manager to show support chat interface in each page load event which is working fine.
GTM tag (custom html)
<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/xxxxxx.js"></script>
<!-- End of HubSpot Embed Code -->
PROBLEM
When I refresh a page manually (full page refresh) hubspot client interface (chat bubble window) shows up.
when I visit page with Turbolinks it doesn't show up.
For debugging I have followed
how-do-i-know-if-my-hubspot-tracking-code-is-working
I can see this tag added to document body (DOM) by inspecting element or by checking it into browser's view page source. Also Network tab show the network call done to js.hs-script.com.
EXPECTED
hubspot chat interface to work with turbolinks page visit:
I had this issue as well and solved it by removing any existing Hubspot scripts from the header before (re-)including the Hubspot script loader. I just added the following script in my view directly before adding the Hubspot loader:
<script>
// Remove Hubspot <head> scripts after a Turbolinks page load
// so it can re-initialize properly. Paste this code immediately
// before the hubspot loading script in the <body>
(function() {
var scripts, script;
// Remove scripts added by hs-scriptloader
scripts = document.querySelectorAll('script[data-loader="hs-scriptloader"]');
for (var script of scripts) {
script.remove();
}
// Remove Hubspot Analytics
script = document.getElementById('hs-analytics');
if (script != undefined) {
script.remove();
}
// Avoid duplicate chat warning and allow chat to load
window.hubspot_live_messages_running = undefined
})()
</script>
<!-- Now add the script to load Hubspot-->
<script async="" defer="defer" id="hs-script-loader" src="//js.hs-scripts.com/xxxxxxx.js" type="text/javascript"></script>
It's still a brittle solution since Hubspot could change the selectors (data-loader etc.) at any time.
The hubspot code inserts 2 js files into the <head> and injects some inline stylesheets into the <body> - one of the js files (conversations-embed.js) creates a div with the id #hubspot-messages-iframe-container. As its name suggests, it contains an iframe with the chat window. It also adds a bunch of css to the body.
The main problem here is that Turbolinks replaces everything in the <body>per page change, leaving the hubspot script unaware of the fact that a page has been changed. Since everything is replaced, the div injected by the script and the css disappears.
My first try was to clone the chat container div into a window variable, and use appendChild(clonedNode) to the event.data.newBody element within the turbolinks:before-render event. While this kinda works, it isn't very elegant. It disappears and reappears each time you change a page. Also, the state was not carried over so if I closed the window it would be open at the next page and so on.
What does work is to move the #hubspot-messages-iframe-containerout of the body into the html tag itself, leaving it out of harms way from turbolinks. It's state is kept (open, closed, etc...) and does not blink or have any side effects. Remember that you have to manually remove it from the pages you may not want it on.
I know it's a bit hacky, but it works and until they have some sort of api to reinitialse the chat window this is a workaround:
document.addEventListener("turbolinks:load", function() {
let targetNode = document.body
let config = { childList: true }
let callback = function() {
if (document.body.querySelector('#hubspot-messages-iframe-container')) {
document.documentElement.appendChild(
document.getElementById('hubspot-messages-iframe-container')
)
observer.disconnect()
}
}
let observer = new MutationObserver(callback)
if (!document.querySelector("html > #hubspot-messages-iframe-container")) {
observer.observe(targetNode, config)
}
})
You will also need to copy the style injected into the body, since Turbolinks will also replace this. This is what I ended up with (converted to Sass):
html.hs-messages-widget-open.hs-messages-mobile
height: 100% !important
overflow: hidden !important
position: relative !important
body
height: 100% !important
overflow: hidden !important
position: relative !important
margin: 0 !important
#hubspot-messages-iframe-container
display: initial !important
z-index: 2147483647
position: fixed !important
bottom: 0 !important
right: 0 !important
&.internal
z-index: 1016
iframe
min-width: 108px
.shadow
display: initial !important
z-index: -1
position: absolute
width: 0
height: 0
bottom: 0
right: 0
content: ""
&.internal
display: none !important
&.active
width: 400px
height: 400px
background: radial-gradient(ellipse at bottom right, rgba(29, 39, 54, 0.16) 0, rgba(29, 39, 54, 0) 72%)
iframe
display: initial !important
width: 100% !important
height: 100% !important
border: none !important
position: absolute !important
bottom: 0 !important
right: 0 !important
background: transparent !important
I have jQuery UI tabs set up, but a problem that I'm having with links to different pages is that they load all contents of the page into the tab. This includes the footer, header, and other navbars that I don't want in the tab. What if I would only like to load a single ID from that page?
My tabs are set up this way:
<div id="mytabs">
<ul>
<li>Awesome page</li>
<li>Foo</li>
</ul>
</div>
Nothing much going on in the jQuery...
$(function() {
$( "#mytabs" ).tabs();
});
Let's say this is the html of "awesomepage" (that the first link targets):
<html>
<head>
<title>awesome page</title>
</head>
<body>
<div id="header">bla</div>
<div id="awesomeness">awesomeness!</div>
<div id="footer">fdsfd</div>
</body>
</html>
...And I only want the tab to load #awesomeness from the page. How would I go about doing this? I've read into some guides that do that by adding a data-target="#youridhere" attribute to the HTML, but I'm still confused on how to implement the javascript. It seems like this is a convenient solution, as I won't be targeting the same ID in every page. Any clues on how to get the javascript working?
Thanks in advance!
The function that allow to load partial code of the response is the $.load() function.
Unfortunately, the tabs() feature does not use this function but use $.ajax instead.
You can try this solution:
You can try to stop the default processing on the beforeLoad callback and manage your ajax call with the $.load() method.
(base on the 1.9 documentation, you may should adapt)
$('#tabs').tabs({
// Callback run when selecting a tab
beforeLoad: function(event, ui) {
// If the panel is already populated do nothing
if (ui.panel.children().size() > 0)
return false;
// Make your own ajax load (with fragment feature)
ui.panel.load(ui.tab.attr('href') + ' #yourFragment');
// stop the default process (default ajax call should not be launched)
return false;
});
NOTICE: I'm not sure about extracting the URL with ui.tab.attr('href'), check before what object is ui.tab, but it should be easy to retrieve the href parameter.
Good luck
Got the solution :) Using one of the answers as a reference point, the tabs can now load a single element specified in the data-target attribute. Here is the modified version:
$(function() {
$('#tabs').tabs(
{
beforeLoad: function(event, ui) {
if (ui.panel.children().size() > 0)
return false;
ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target'));
return false;
}
});
});
I want to add Google AdWords to my site but the script I'm supposed to add creates an iframe in the dom. This iframe is visible and moves down 13px (its height) all my page.
Is there any way to avoid this? If not, can I hide it without affecting Google AdWords functionality? (It is an empty iframe).
There's an easy fix that doesn't affect the functionality of the code snippet. I've done this with no adverse effects. Just place the script within a hidden div like below and it should do the trick:
<div style="display:none">
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
</div>
#Mario is correct that there is a setting that will allow you to turn this display off. However, this setting doesn't seem to exist on the Google UI for remarketing tags, even though they do display this iframe (I think this is a bug on Google's end, as I imagine the "google_remarketing_only = true" flag was supposed to turn this iframe off and isn't working correctly).
I found out that you can also set this in the tracking JS by manually adding the flag "google_conversion_format = 3", like so:
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 0123456789,
google_conversion_label = "XXXXXXXX",
google_custom_params = window.google_tag_params,
google_remarketing_only = true,
google_conversion_format = 3;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
This might be easier that regenerating the tags for some people, and solves the problem in the case that the UI doesn't support setting this option when generating the tags.
I normally add this CSS(3) rule to the stylesheet:
iframe[name=google_conversion_frame]
{
display: none !important;
}
Hope it helps.
you can also set max-height: 0; instead of display:none;
Not sure of implications of display none on the iframe.
This works back to ie6.
iframe[name="google_conversion_frame"] {
display: block;
max-height: 0;
}
The best and simplest solution that I have come across for this issue is simply to remove the frame from the document flow by adding the following code to the css stylesheet:
iframe[name="google_conversion_frame"]{
position:fixed;
}
Hope this helps
I found this wonderfull tooltip called qTip2. Loving it so far but has gotten myself into a problem using it.
I was able to install and get qTip2 running with my Rails 3.1 setup. However I'm running into a problem when I'm using qTip2's ajax functionality.
qTip2 ajax request requires a link to the script to be executed before displaying it in the tooltip content div (which is automatically generated by qTip2). You can look at the code I'm referring to here.
http://www.craigsworks.com/projects/qtip2/demos/#ajax
The problem with it is that it does not really go well with RoR. An ajax request declared using RoR is more explicit, where I can explicitly tell rails which div id I would like to update.
Given the following circumstances I needed to do the following things:
the tooltip content must be dynamic
I needed to use the qTip2 ajax functionality so that I could create a custom layout for the tooltip content.
I did try the followings though:
Put the html snippet to be loaded to the content div in the public folder. The content loaded with the right format but I can't have dynamic content. html.erb files didn't seem to work in this folder. Is there any alternative to this folder that would work but with dynamic content?
Tried to use qTip2 ajax request with RoR but was not successful. What I did was I tried to explicitly define the ajax update id in the .js respond file (going through the controller and views etc.). But figuring out the exact id that was generated by qTip2 plugin was a little too overwhelming for me.
here is what I have
html
<a id="editor1" href="/deals_details.html.erb">
javascript
$(document).ready(function()
{
$('#editor1').each(function()
{
$(this).qtip(
{
content: {
text: '<img class="throbber" src="/assets/throbber.gif" alt="Loading..." />',
ajax: {
/*once: false*/
url: $(this).attr('href')
},
title: {
text: 'qTip2 Test',
button: true
}
},
position: {
at: 'center',
my: 'center',
viewport: $(window),
},
show: {
event: 'click',
solo: true
},
hide: 'unfocus',
style: {
classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow'
}
})
})
// Make sure it doesn't follow the link when we click it
.click(function(event) { event.preventDefault(); });
});
CSS
.ui-tooltip-wiki{
max-width: 440px;
}
.ui-tooltip-wiki .ui-tooltip-content{
padding: 10px;
line-height: 12.5px;
}
.ui-tooltip-wiki h1{
margin: 0 0 7px;
font-size: 1.5em;
line-height: 1em;
}
.ui-tooltip-wiki img{ padding: 0 10px 0 0; }
.ui-tooltip-wiki p{ margin-bottom: 9px; }
.ui-tooltip-wiki .note{ margin-bottom: 0; font-style: italic; color: #888; }
Please help me!! :) Apology if this post looks stupid, this is my first question on stackoverflow.
I think you're making it too complicated. The qTip ajax functionality simply requests a URL, and the return value is HTML content within a div tag. If you look at the source of the demo you mentioned, you'll see a request for http://www.craigsworks.com/projects/qtip2/data/burrowingowl.php. If you look at what that produces, it is simply a div tag with some content (the style looks different because it is further transformed by the page's CSS).
So the question becomes: can you provide your dynamic content in a div in response to a URL in Rails? Of course! Perhaps you want to set up a SnippetController with a show action and then using pretty standard Rails conventions/routes your URL might be /snippet/show/[ID] and you simply have the view produce the required div content.