Goal:
If the user use IE, I want a part of the sourcecode, that is "<div id="ctl31_ctl09" style="width: 100%; height: 100%; overflow: auto; ;">"
to be changed into
"<div id="ctl31_ctl09" style="width: 150%; height: 100%; overflow: auto; ;">" in SSRS.
Firefox still gonna use the orginal sourcecode if the user(s) use FF.
Problem:
How and where should I enable to change the source code after the original code is generated.
My logical solution and ide would be:
1. Generate the original code and display the result based on the original code in
http://myserver/report.
2. if the browser use IE, change part of the sourcecode that is:
"<div id="ctl31_ctl09" style="width: 100%; height: 100%; overflow: auto; ;">"
into
"<div id="ctl31_ctl09" style="width: 150%; height: 100%; overflow: auto; ;">".
The question is
how to do it?
I strongly believe that you also gonna need to use and change part of the code in ReportingServices.js
Information:
*I'm using SQL server 2008 R2 and Visual Studio 2008 Professional.
*The sourcecode is webdevelopment.
The answer is to download IE11 and this problem will disappear.
Related
I am working on my first web dev project, with someone, and I am responsible for the front-end part. In my personal projects I've been using plain css, but in this template I have seen that they are using something else, a different structure, I think. I kind of figure it out how it works, but because I never crossed paths with it before, it makes developing hard for me. I would like to know what it is so I can read some documentation and understand it better. (as an example: usually ,when I use className, I put the class name between "", but here is like css.something) Can you tell me what it is ? I will leave a snippet here
.menuItem {
#apply --marketplaceListingAttributeFontStyles;
color: var(--matterColor);
/* Layout */
position: relative;
min-width: 300px;
margin: 0;
padding: 4px 30px;
display: flex;
align-items: center;
justify-content: center;
/* Override button styles */
outline: none;
text-align: left;
border: none;
white-space: nowrap;
cursor: pointer;
&:focus,
&:hover {
color: var(--matterColorDark);
}
&:hover .menuItemBorder {
width: 6px;
}
}
<button className={css.menuItem} onClick={()=> this.selectOption(queryParamName, option.key, dates)}>
This is CSS Modules and you can read more about this usage of CSS in these 2 links:
link1
link2
Although I'm not overly familiar with React, this (className={css.menuItem}) is some sort of model binding so that when React has done it's thing it will bind the value of css.menuItem to the rendered HTML probably ending up with something like
<button className=".menuItem" ...>
The Javascript format you see there is a view binding, or something we might describe as a Domain Specific Language (DSL). It is Javascript used by some framework (likely React or another frontend framework) to build the HTML you see on the page. I can't be certain since I don't know what framework I'm looking at, but I'm willing to bet that if you use the "inspect" feature in your browser, you will see this in the resulting HTML that is created by that Javascript:
<button class="menuItem" onClick="[...]">
This format should look familiar to you if you are expecting plain HTML. That Javascript you linked to just builds this HTML dynamically. In the example you provided, the curly braces ({ }) are just an indicator to the Javascript library that it need to fill in that placeholder with something, in this case css.menuItem, which translates to a class name of menuItem rendered into a css class tag (class="menuItem").
Have you looked into what that css object holds?
From what I can see, the #apply puts the css part to be in pre-compiled language like SASS or SCSS.
You have not mentioned if it is ReactJS. If it is then there is a high possibility that whatever you are dealing with is in JSS.
im working at the moment on a desktp client for a project im workin as webdeveloper / sysadmin. So my great idea was to build the desktp client simple as easy using electron :D
but it isnt working :c
i used the but the result is pretty uncool ... https://i.gyazo.com/fc71a28e608da9aaf272ef1de08cdeb3.png [image link using gyazo]
the sourcecode is aviable # [https://github.com/MineasiaMC/Desktop-Clients]
Use css.
Something like:
webview {
display: flex;
width: 100%;
height: 98%;
border: none;
}
Using Rails 4.
In my kc.scss file, which is the last one listed in application.scss, I have the following two classes, neither of which appear in any other scss file:
.kc-hilite {
color: #000;
background-color: #ffff00;
border-color: #000000;
}
.kc-wide {
width: 150px;
}
In my _buttons.html.erb partial, I have the following element:
<input name="commit" class="btn kc-wide kc-hilite" id="report" type="submit" value="Report Issue">
kc-wide works fine. The kc-hilite class is totally being ignored. If I copy it into the partial as a style, it works fine even unmodified. When it is accessed through the scss file, it doesn't seem to exist.
To debug this, I have tried it as an inline style, as I mentioned. I also changed its name. And, I listed it alone as a class in the element. Nothing made it work.
Looking in DOM Explorer, I see the following:
/*media all*/
.kc-wide {
width: 150px;
}
However, there is no entry for kc-hilite at all.
What simple issue am I blindly missing? Thanks...
I guess the issue would be with the compiled file. Could you check the compiled CSS file, and see if it contains the classes.
To clarify, hand tool is a function for user click on the pdf and dragging around , that is used to replace the scroll bar navigating .
The problem is, by default the Chrome and Firefox pdf viewer do not have that function and I would like allow the user to drag the page.
A workaround is to use a JavaScript library (Grab to Pan https://github.com/Rob--W/grab-to-pan.js in my case) with an embed object (PDF viewer). When I maximum the size of the pdf and user drag the embed object.
The problem I have encounter is
When using Chrome / Firefox, the PDF content do not fit to the page but auto resize by default even I have set the Adobe PDF open parameter, using iframe.
The JavaScript code seems conflict with the Firefox PDF viewer, it works smoothly on Chrome but not firefox.
Here is the source code, you may download the library from the link mention above and have a look. Don't forget to put a '1.pdf' along with the source file.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Grab-to-pan.js demo</title>
<link rel="stylesheet" href="grab-to-pan.css" type="text/css">
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.scrollable {
overflow: auto;
width: 100%;
height: 100%;
background-color: #EEE;
}
#zoomPage {
overflow:visible;
width: 100%;
height: 150%;
}
</style>
</head>
<body>
<label><input type="checkbox" id="activate-g2p" checked> Activate Grab to Pan</label>
<div class="scrollable" id="scrollable-container">
<object id = 'zoomPage' type='application/pdf' data= '1.pdf#zoom=page-fit'><p>The PDF can not display</p></object>
</div>
<script src="grab-to-pan.js"></script>
<script>
document.getElementById('activate-g2p').onchange = function() {
if (this.checked) g2p.activate();
else g2p.deactivate();
};
var scrollableContainer = document.getElementById('scrollable-container');
var g2p = new GrabToPan({
element: scrollableContainer
});
g2p.activate();
</script>
</body>
</html>
I don't think you can. The pdf is loaded as a embedded object.
Assuming that you are developing a web application, you can use pdf.js to load/view pdf documents either with your own JavaScript or using its own viewer. This way you won't have to worry about browser implementation of loading pdf documents, and you can fiddle with the viewer as per your requirements.
Hope this helps.
If you want to allow the user to use whatever PDF viewer they have configured, you cannot add functions to that viewer. If you want to control the operation of the viewer, you need to provide it yourself. This is very much an either/or situation. Attempting to mix the two will not lead to good results. Google and Mozilla are free to change their PDF viewers without giving any thought whatsoever to your site.
As mentioned above, you can embed PDF.js in your web site, per the instructions at https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website. I don't know whether this viewer's PDF support is good enough for your scenario, but you can certainly test it out. Since the PDF.js code is hosted on your site and thus under your control, you may be able to edit it as you see fit.
What I want to do is to check through a conditional comment if a user is using IE6,7 or 8 and if he does then I want to load a different html file than my index.php.
I have been instructed to use a javascript like the one below:
$(document).ready(function(){
$(body).html('Please download firefox or chrome to view this site');});
and then use the normal conditional comment structure with tag including the js file, but for some reason this doesn't work.
Additionally as I said above I want to redirect the users in a new html file ex.main.html instead of index.php, if they are using IE as their browser. I do not want to use html code inside the comment, I want to somehow force the user be redirected to the new file.
Any ideas or guidance will be greatly appreciated. Thanks in advance.
For a redirect in jQuery you could use:
$(window.location).attr('href', 'http://www.stackoverflow.com');
Or in plain JavaScript:
window.location.href='http://www.stackoverflow.com';
The simple solution, without JavaScript would look like this (put this in your <head>):
<!--[if lte IE 8]><meta http-equiv="refresh" content="0;url=http://example.com/ie.html" /><![endif]-->
This would redirect the user to http://example.com/ie.html (Just replace that part with the actual URL). Advantage of this solution: It does also work, if the user has deactivated JavaScript.
You can use jQuery.browser method to determeine the browser being used.
Example:
if ($.browser.msie) {
alert("this is IE :(");
}
span:only-of-type {
display: none;
}
span {
position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 300px;
margin: -150px 0 0 -150px;
background: black;
}
…
<span>Dude, get a real browser!</span>