I have a responsive site with bootstrap 3.1.1. I want to show the desktop view when the user click a button "Desktop view".
I have used this question right here as the support but this does not help.
It does not help for 2 reasons:-
The CSS I have added in my Layout file is as shown:
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' />
I have used hidden-xs, hidden-sm, hidden-md and hidden-lg classes throught out my application.
How can I make the site desktop view and mobile view with the button click?
EDIT
I am simultaneously using both the style sheets at the same time. The style sheet for "mobile.css" and "desktop.css" (for the items which doesnot need to be styled specially for mobiles).
SO swapping both the style sheet would not work.
A way: is to use Jquery to change the meta tag for the viewport when the button is clicked:
$('#buttonId').click(function (){
$('meta[name=viewport]').attr('content', "width=1024");
});
I just thought of something simple. To all you divs that have hidden-xs classes: add a special class (had-hidden-xs), for hidden-lg add had-hidden-lg and so on for every single one of them.
//when the button is clicked, every class is removed
$('#buttonId').click(function (){
//removes all the classes
$('.hidden-xs, .hidden-sm, .hidden-md, .hidden-mg').removeClass('hidden-xs hidden-sm hidden-md hidden-mg');
});
//when the button to go to mobile view is clicked:
$('#backToMobile').click(function (){
//add back your classes using the classes you created in the previous 2 steps
$('.had-hidden-xs').addClass('hidden-xs');
$('.had-hidden-sm').addClass('hidden-sm');
$('.had-hidden-md').addClass('hidden-md');
$('.had-hidden-lg').addClass('hidden-lg');
});
Before Question Edit: Looking at your style sheet, you probably have a style for desktop too since you have a mobile.css. You can easily swap the stylesheets using jquery
$('#buttonId').click(function (){
$('link[href="styles/mobile.css"]').attr('href','desktop.css');
});
$('#buttonId').click(function (){
$('link[href="style/desktop.css"]').attr('href','mobile.css');
});
Related
Say I have an element with the following structure:
<Link to={`/games/${game.id}`}>
<GameInfo/>
<CustomButton/>
</Link>
Is it possible for the button inside the link to behave independently from the link beneath without using the z-index css property? I'd like to do this while keeping the current behaviour in which hovering the button triggers both the hover effect for the button and for the link below.
Right now, if I click on the Add to Library button, the game gets added to the library but the Link below also gets triggered and the game profile page is open, which is not intended.
The only solution I can think of so far is something like this:
<div> // <= move link hover effects here
<Link to={`/games/${game.id}`}>
<GameInfo/>
</Link>
<CustomButton/>
</div>
But it's not ideal, because I would still like the area around the button to be part of the Link (so hover and the link itself work in the areas shown below).
Is z-index the only solution?
You can make use of preventDefault and stopPropagation to achieve this inside button click use like this below
<Link to="/game">
<div>
<button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
//function to do your stuff
}}
>
Click Me
</button>
</div>
</Link>
You can check the demo here
https://codesandbox.io/s/adoring-sun-dwnde?fontsize=14&hidenavigation=1&theme=dark
I have a button in React which when clicked scrolls the page to the desired location, which is working.
<div className={styles.classB}>
<Button onClick={ScreenMover.MoveToElem} > Extras </Button>
</div>
But I wanted the same onClick feature without a button, say a link and when clicking it should do the same operation. So I have used the below Link button, but it is not taking the onClick instead it goes to the page top based on the to="" attribute.
<div className={styles.classL}>
<Link className={styles.linkButton} onClick={ScreenMover.MoveToElem} to=""> Extras </Link>
</div>
Another thought, if we can not achieve the above one, then can we have a button look like a link by applying some css style to the button? I should be able to override the inherited button styles and instead it should take the link look and feel. Is it possible and can we have a sample css class for it?
Thanks in advance.
The Link object is important for you?
If not you can use a simple <p> tag and the onClick event will working perfectly.
<p className={styles.linkButton} onClick={ScreenMover.MoveToElem}> Extras </p>
I would like to modify quite a large amount of styles on a page through a customisable panel. When a user clicks an option, the content on the page will completely change based on whatever was clicked.
This cannot be a scenario where a class is appended to a parent element and use CSS/LESS to adjust accordingly. For this scenario (for requirement reasons) the CSS needs to be internal on the angular component HTML.
Is it possible to have a value in the component TS like this:
myNewColour: "red"
That can then be used in an internal style sheet that's inside my angular component.html like this?:
<style>
.myContainer { background: myNewColour }
</style>
<!-- HTML Content -->
<div class="myContainer"> Stuff </div>
Any help with this would be appreciated! :)
"Internal in the HTML template" is called inline style ;) Apart from that, you can use ngStyle like so
<tag [ngStyle]="{'background': myNewColour}"></tag>
EDIT if it makes your code too long, what you can do is simply
let customStyle = {
'background': this.myNewColour
};
And in your tag, simply
<tag [ngStyle]="customStyle"></tag>
I am beginner of cordova learning project and creating a sample application using eclipse. Using CSS file I am able to change image, height, width, margin and padding around it.
Now, to show Labels, Buttons and Radio button, listview how to add such UI components and where to add in index.html or css and handling a click event of button?
You could add any HTML component in the body tag.
<body>
//your code for various elements goes here.
</body>
But, if you want to add these components in real time use the innerHTML property (javascript) and allocate an event listener to that component.
HTML-
<label id="alpha1" onclick="fx()">Placeholder</label>
JS-
document.getElementById('alpha1').innerHTML="Content"
function fx (){
alert('Label Clicked');
}
super css noob here.
I'm using a wordpress plugin called visual composer which allows you to name a Row (it's like a block element) with a Row ID or a Class name. I'm trying to have it so when a user hovers over this row and when they click it, this clicking will simply take them to another page within my website.
It allows for an area to have the css for this class or ID that I can associate with the tag, but after searching I'm either searching the wrong thing or can't find it but I am looking for the css that would allow me to do this!
You can't only use css to link to other page, you need javascript. For example the class name is linkPage:
document.getElementsByClassName('linkPage')[0].onclick = function(){
location.href= 'some url...'
}
<div class="linkPage">linkPage</div>
You'd need to inject a bit of JS into the theme that listens on window for a click with the desired ID or class, then call window.location.href = URL or something of that nature.
CSS doesn't have the power to cause browser location changes.
CSS
CSS (Cascading Style Sheet), as its name states, defines a set of rules and properties for an HTML page you wish to style (stuff like colors, size, asf); and user interaction (even as minor as pointing to an URL) are not part of its scope.
Basic
Talking about a giant like WordPress and a strong plugin such as Visual Composer, extremely old and standard features like link/image/table asf are always to be found. You may have a look at visual composer's "Raw HTML" feature (https://vc.wpbakery.com/features/content-elements/) in combination with a regular "a" tag (http://www.w3schools.com/tags/tag_a.asp).
Editable
Asking how page linking can be achieved through editing of a CSS file, then you might as well look into different editable content types of the plugin - such as HTML or JS.
Click on table row
Best approach to have table cells/rows clickable would be by the use of JavaScript; see Adding an onclick event to a table row
Link using jQuery and Javascript (easier method):
$(".link").click(function(){
window.location.replace('https://www.example.com');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
Link using pure Javascript (harder method):
x = document.querySelectorAll('.link').length;
y = 1;
while (x => y) {
document.getElementsByClassName("link")[y].onclick = function() {
window.location.replace("https://www.example.com");
};
y++;
}
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>